【逆天大總結(jié)系列】
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：內(nèi)box-shadow
.box{
box-shadow: inset 5px 0 0 0 deeppink;
}
method5：drop-shadow
.box{
filter: drop-shadow( -5px 0 0 deeppink); //三種參數(shù)：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實(shí)現(xiàn)（也是蠻拼的）
.box{
width: 205px;
background-color : deeppink;
overflow-y: scroll; //強(qiáng)制顯示滾動(dòng)條
}
.box::webkit-scrollbar{
width: 200px;
background-color: #ddd;
}
