點擊右上方紅色按鈕關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！
關於只用一個標籤實現左邊豎條，先不考慮兼容性的問題，我們來拓展一下自己的思路。看看有哪些好玩的處理的辦法。
目的是實現上面這個樣式。
div{
position:relative;
width:200px;
height:60px;
background:#e0e0e0;
}
第一種解法：設置border
div{
border-left:5px;solid deeppink;
}
第二種解法：使用偽元素
偽元素的用法都很熟悉了，這裡不詳細解釋了。
div::after{
content:"";
width:5px;
height:60px;
position:absolute;
top:0;
left:0;
background:deeppink;
}
第三種解法：使用外box-shadow
div{
box-shadow:-5px 0px 0 0 deeppink;
}
能想到這個方法，需要知道box-shaodw 的每一個參數具體作用，這裡可以單獨花點時間來搞懂。
第四種解法：使用內box-shadow
div{
box-shadow:inset 5px 0px 0px deepink
}
與第三種解法類似。
第五種解法：使用濾鏡drop-shadow
關於濾鏡這個屬性還不是很理解的，可以翻看我以前的文章，有詳細的介紹。
div{
filter:drop-shadow(-5px 0 0 deeppink)
}
第六種解法：使用漸變linearGradient
CSS3 的漸變分為線性漸變和徑向漸變，本題使用線性漸變，可以輕易解開這道題。
div{
background-image:linear-gradient(90deg, deeppink 0px, deeppink 5px, transparent 5px);
}
第七種解法：使用輪廓outline
div{
height:50px;
outline:5px solid deeppink;
}
div{
position:absolute;
content:"";
top:-5px;
bottom:-5px;
right:-5px;
left:0;
background:#ddd;
}
第八種解法：使用滾動條
改變滾動條樣式來實現。
div{
width:205px;
background:deeppink;
overflow-y:scroll;
}
div::-webkit-scrollbar{
width: 200px;
background-color:#ddd;
}
總結一下：
仔細想想，每一個方法都是一種思路，一個知識點，特別是最後一個利用滾動條的解法，有沒有讓你覺得很新鮮呢。
閱讀更多 小鄭搞碼事 的文章
