html背景颜色竖条,前端开发:使用css实现左边竖条的8种方法

只使用一个标签,可以有多少种实现下面的样式呢? 假设我们的单标签是一个 div: 定义如下通用CSS: div{ position:relative; wi

只使用一个标签,可以有多少种实现下面的样式呢?

90678c7ef95303d89ac98359887f69d3.png

假设我们的单标签是一个 div:

定义如下通用CSS:

div{

position:relative;

width:200px;

height:60px;

background:#ddd;

}

法一:border

这个应该是最最最容易想到的了

div{

border-left:5px solid deeppink;

}

法二:使用伪元素

一个标签,算上 before 与 after 伪元素,其实算是有三个标签,这也是很多单标签作图的基础,本题中,使用伪元素可以轻易完成。

div::after{

content:"";

width:5px;

height:60px;

position:absolute;

top:0;

left:0;

background:deeppink;

}

法三:外 box-shadow

盒阴影 box-shadow 大部分人都只是用了生成阴影,其实阴影可以有多重阴影,阴影不可以不虚化,这就需要去了解一下 box-sha