【逆天大总结系列】
Paste_Image.png
.box{
position: relative;
width: 200px;
height: 60px;
background: #ddd;
}
<div class=“box"></div>
method1：border-left
.box{ border-left: 5px solid deeppink; }
method2：伪元素
.box: before{
content: “”;
position: absolute;
width: 5px;
height: 60px;
top: 0;
left: 0;
background: deeppink;
}
method3：外box-shadow
.box{
box-shadow: -5px 0 0 0 deeppink;
}
method4：内box-shadow
.box{
box-shadow: inset 5px 0 0 0 deeppink;
}
method5：drop-shadow
.box{
filter: drop-shadow( -5px 0 0 deeppink); //三种参数：X\Y\blur\color
}
method6：线性渐变
background-image: linear-gradient(90deg, deeppink 0px, deeppink 5px, transparent 5px);
}
method7：outline
用outline代替border，然后用伪元素把其他地方都遮住，太麻烦，本宝宝绝对不会用的。。。
.box{
height: 50px;
outline: 5px solid deeppink;
}
.box:after {
1. content: "";
2. position: absolute;
3. right: -5px;
4. top: -5px;
5. bottom: -5px;
6. left: 0;
7. background: #ddd;
}
method 8：scroll-bar实现（也是蛮拼的）
.box{
width: 205px;
background-color : deeppink;
overflow-y: scroll; //强制显示滚动条
}
.box::webkit-scrollbar{
width: 200px;
background-color: #ddd;
}
