单标签,左边竖条的实现,尽可能多的写出实现方式(只使用一个标签,不考虑浏览器的兼容性)
对于一个单标签如何合计算上伪元素:before和:after的话,应该算是有三个标签的:
那么对于下图的效果,单标签如何实现呢?
<div class="vertical_line"></div>
1、使用border-left实现:
.vertical_line {
width: 200px;
height: 60px;
background-color: #ddd;
border-left: 5px solid red;
}
2:使用伪类:before或者:after来实现:
.vertical_line {
width: 200px;
height: 60px;
background-color: #ddd;
position: relative;
}
.vertical_line::before {
position: absolute;
top: 0;
bottom: 0;
content: '';
width: 5px;
height: 60px;
background-color: red;
}
3、使用box-shadow:盒阴影的外阴影或者内阴影:
.vertical_line {
width: 200px;
height: 60px;
background-color: #ddd;
box-shadow:-5px 0px 0 0 red;
}
.vertical_line {
width: 200px;
height: 60px;
background-color: #ddd;
box-shadow:inset 5px 0px 0 0 red;
}
4、使用drop-shadow:
.vertical_line {
width: 200px;
height: 60px;
background-color: #ddd;
filter:drop-shadow(-5px 0 0 red);
}
5、使用渐变:
.vertical_line {
width: 200px;
height: 60px;
background-color: #ddd;
background-image: linear-gradient(90deg, red 0px, red 5px, transparent 5px);
}
5、使用outline:调节微元素中的top,bottom,right 和left,可以实现效果,但是并不理想;
.vertical_line {
height: 50px;
outline: 5px solid red;
}
.vertical_line::after {
position: absolute;
content: '';
top: -5px;
bottom: -5px;
right: -5px;
left: 0;
background: #ddd;
}
6、使用滚动条的样式:
.vertical_line {
width: 205px;
background: red;
overflow-y: scroll;
}
.vertical_line::-webkit-scrollbar {
width: 200px;
background: #ddd;
}