美文网首页网页前端后台技巧(CSS+HTML)Web前端之路码农的世界
前端开发入门到实战:css左边竖条的实现方法

前端开发入门到实战:css左边竖条的实现方法

作者: 560b7bb7b879 | 来源:发表于2019-08-14 13:12 被阅读9次

    问题描述:

    在只使用一个标签的情况下实现左边竖线,通用标签与样式如下:

    实现左边竖线

    html:

    <div>实现左边竖线</div>
    

    css:

    web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
    .div1 {
            width: 200px;
            height: 50px;
            line-height:50px;
            text-align: center;
            background: #ccc;
            position: relative;
      }
    

    方法一:使用border

    .div1 { border-left: 5px solid red;}
    

    方法二:使用伪元素来实现

    每个标签都会有before及after两个伪元素,并且我们也经常用这类标签做一些Icon之类的小图标。这里我们使用伪元素,也会很容易来实现想要的效果。

    .div1::before {
            content: "";
            width: 5px;
            height:50px;
            position: absolute;
            top: 0;
            left: 0;
            background: red;
    }
    

    方法三:内/外阴影

    使用内阴影或者外阴影也能实现此效果,不过在有些Chrome(比如:Chrome/70.0)版本上会底部1px兼容性问题,其他浏览器没遇到。

    /* 内阴影 */
        .div1{
            box-shadow:inset 5px 0px 0 0 red;
        }
    
    /* 外阴影  有些Chrome(比如:Chrome/70.0)版本上会底部1px兼容性问题,显示效果如下图*/
        .div1{
            box-shadow:-5px 0px 0 0 red;
        }
    

    方法四:drop-shadow

    CSS3 新增滤镜 filter 中的其中一个滤镜drop-shadow,也可以生成阴影。

    .div1{
       filter:drop-shadow(-5px 0 0 red); 
     }
    

    方法五:渐变 linearGradient

    .div1 {
        background-image: linear-gradient(90deg, red 0px, red 5px, transparent 5px);
      }
    

    此外还可以用outline或者滚动条的形式来实现,但是这两种的体验效果或者兼容性都不是太好,不推荐使用。

    自己是一个五年的前端工程师,希望本文对你有帮助!

    这里推荐一下我的前端学习交流扣qun:731771211 ,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,每天分享技术

    点击:加入

    相关文章

      网友评论

        本文标题:前端开发入门到实战:css左边竖条的实现方法

        本文链接:https://www.haomeiwen.com/subject/chtdrctx.html