一个元素实现左边框

【逆天大总结系列】

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;
}