css之左边竖条的实现方法

//法一：border

div{
        border-left:5px solid deeppink;
}

//法二：使用伪元素
div::after{
    content:"";
    5px;
    height:60px;
    position:absolute;
    top:0;
    left:0;
    background:deeppink;
}

//法三：外 box-shadow
div{
    box-shadow:-5px 0px 0 0 deeppink;
}

//法四：内 box-shadow
div{
    box-shadow:inset 5px 0px 0 0 deeppink;
}

//法五：drop-shadow
div{
    filter:drop-shadow(-5px 0 0 deeppink);
}

//法六：渐变 linearGradient
div{
    background-image:linear-gradient(90deg, deeppink 0px, deeppink 5px, transparent 5px);
}

//法七：轮廓 outline
div{
    height:50px;
    outline:5px solid deeppink;
}
div::after{
    position:absolute;
    content:"";
    top:-5px;
    bottom:-5px;
    right:-5px;
    left:0;
    background:#ddd;
}

//法八、滚动条
div{
    205px;
    background:deeppink;
    overflow-y:scroll;
}
div::-webkit-scrollbar{
     200px;
    background-color:#ddd;
}

div{

    position:relative;

    width:200px;

    height:60px;

    background:#ddd;

　　}