首页 > 代码库 > 左边竖条

左边竖条

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

 

左边竖条