css之左邊豎條的實現方法

//法一：border

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

//法二：使用偽元素
div::after{
    content:"";
    width: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{
    width:205px;
    background:deeppink;
    overflow-y:scroll;
}
div::-webkit-scrollbar{
    width: 200px;
    background-color:#ddd;
}

div{

     position : relative ;

     width : 200px ;

     height : 60px ;

     background : #ddd ;

　　}