用css实线左边竖条

只给一个div标签,实现下图所示的左边竖条


左边竖条

方法很简单,直接贴代码。
法一(border):

div {
    position: relative;
    box-sizing: border-box;
    background-color: lightgrey;
    border-left: 5px solid deeppink;
    width: 100px;
    height: 60px;
    left: 100px;
    top: 100px;
}

法二(伪元素):

div {
    width: 100px;
    height: 60px;
    background-color: lightgrey;
    position: relative;
}

div::before {
    content: "";
    width: 5px;
    height: 60px;
    background: deeppink;
    position: absolute;
}

法三(box-shadow):

div{
    box-shadow:-5px 0px deeppink;/*box-shadow: h-shadow v-shadow blur spread color inset;*/
}
div{
    box-shadow:5px 0px deeppink inset;
}

法四(drop-shadow):

div {
    filter: drop-shadow(-5px 0 deeppink); /*filter: drop-shadow(x偏移 y偏移 模糊大小 色值);*/
}

完。~

推荐阅读更多精彩内容

  • 一、html5新特性 1.增加了一个专门用于绘画的元素canvas 2.增加了用于媒体播放的音频和视频元素 3.增...
    空谷悠阅读 152评论 0 2
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 2,046评论 0 10
  • 金三银四时节,最是人才市场忙碌季。 在这敏感高峰期,蠢蠢欲动的你是否有这样的纠结? 连续有几家公司来电邀请面试,请...
    Vienna_wfm阅读 178评论 0 1
  • 成天坐在家里,即便想写点东西也无话可说。 这两天在看《诗经》,除却耳熟能详的那几篇,其他的 一眼望去,生僻不已。密...
    一束冬阳阅读 33评论 0 1
  • 最珍贵的东西,往往也最易破碎,例如爱。世界上无数个事实都证明过,建立在利益,物质,或者其他目的之上的关系,较之仅仅...
    Ambun阅读 393评论 0 0