前端开发：8种使用css实现左侧竖线的方法CSS:div{position:relative;width:200px;height:60px;background:#ddd;}方法一：border应该是最容易想到的div{border-left:5pxsoliddeeppink;}方法二：使用伪元素一个标签，算上前后伪元素，其实是三个标签，这也是很多单标签画的基础。这道题使用伪元素就可以轻松完成。div::after{content:"";width:5px;height:60px;position:absolute;top:0;left:0;background:deeppink;}方法三：outerbox-shadowboxshadowbox-shadowmostpeople它仅用于生成阴影。其实影子可以有多重影子，影子不能模糊。需要了解box-shadw各个参数的具体作用。使用box-shaodw解决问题div{box-shadow:-5px0px00deeppink;}方法四：innerbox-shadowboxshadow还有一个参数inset，用来设置内阴影，也可以补全：div{box-shadow:inset5px0px00deeppink;}方法五：drop-shadowdrop-shadow是css3新增的filter滤镜中的滤镜之一，也可以生成阴影，但是它的数值参数个数只有3个，比原来少1个盒子阴影。div{filter:drop-shadow(-5px00deeppink);}方法六：渐变linearGradient灵活运用CSS3渐变可以完成大量意想不到的图形。CSS3渐变分为线性渐变和径向渐变。这道题用的是线性渐变，很容易解题：div{background-image:linear-gradient(90deg,deeppink0px,deeppink5px,transparent5px);}方法七：轮廓用的比较少。轮廓（outline）是围绕元素绘制的一条线，位于边框Periphery的边缘，起到突出元素的作用。这种方法是下一个选择。div{height:50px;outline:5pxsoliddeeppink;}div::after{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;}抛开实用性不谈，如果只是模拟这种风格，这个方法确实大放异彩。以上是想到的8种方法。不排除有意料之外的情况。希望有其他方法可以在评论中提出。你可以自己试试。【本文为专栏作家“谢军”原创稿件。转载可通过作者微信取得联系公众号(jingfeng18)】点此查看该作者更多好文
