cssmagic-如何实现左侧竖条

css:.div1{width:200px;高度：50px；行高：50px；文本对齐：居中；背景：#ccc；位置：相对；}方法一：使用border.div1{border-left:5pxsolidred;}方法二：使用伪元素实现每个标签都会有前后两个伪元素，我们经常使用这种标签来制作一些Icon等小图标。这里我们使用伪元素，很容易达到想要的效果。.div1::before{内容：“”；宽度：5px；高度：50px；位置：绝对；顶部：0；左：0；背景：红色；这个效果是可以实现的，但是在某些版本的Chrome中（例如：Chrome/70.0）会存在底部1px的兼容性问题，这是其他浏览器不会遇到的。/*内阴影*/.div1{box-shadow:inset5px0px00red;}/*外阴影部分Chrome版本（例如：Chrome/70.0）底部1px存在兼容性问题，显示效果如下图*/。div1{box-shadow:-5px0px00红色;}Chrome/70.0下的显示效果方法四：drop-shadowCSS3添加了drop-shadow，filter中的滤镜之一，同样可以产生阴影。.div1{filter:drop-shadow(-5px00red);}方法五：渐变linearGradient.div1{background-image:linear-gradient(90deg,red0px,red5px,transparent5px);}另外，可以使用outline或者scrollbar，但是这两者的体验效果或者兼容性不是很好，所以不推荐使用。