点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！
关于只用一个标签实现左边竖条，先不考虑兼容性的问题，我们来拓展一下自己的思路。看看有哪些好玩的处理的办法。
目的是实现上面这个样式。
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;
}
总结一下：
仔细想想，每一个方法都是一种思路，一个知识点，特别是最后一个利用滚动条的解法，有没有让你觉得很新鲜呢。
閱讀更多 小鄭搞碼事 的文章
