左边竖条

Posted 2020-09-07 白卫云

1、用border写左边竖条

html：<div></div>

css: 

　　div{

　　　　position:relative;
　　　　width:200px;
　　　　height:60px;
　　　　background:#ddd;
　　}
　　div{
　　　　border-left:5px solid deeppink;
　　}

2、用伪类写左边竖条

　　div::after{
　　　　content:"";
　　　　width:5px;
　　　　height:60px;
　　　　position:absolute;
　　　　top:0;
　　　　left:0;
　　　　background:deeppink;
　　}

3、用box-shadow写左边竖条

　　div{
　　　　box-shadow:inset 5px 0px 0 0 deeppink;
　　}