实现边框的几种方式

最新推荐文章于 2021-06-03 05:13:54 发布

ailinyang8566

最新推荐文章于 2021-06-03 05:13:54 发布

阅读量227

点赞数

原文链接：http://www.cnblogs.com/D-Y-W/p/10577054.html

版权

页面布局代码

div{
    position: relative;
    width: 200px;
    line-height: 50px;
    background-color:#666666;
    color: #fff;
    margin-left: 20px;
    margin-top: 20px;
    box-sizing: border-box;
}
<body>
    <div class="bl">一个人去拉萨</div>
</body>

利用 border属性

    .bl{
        border-left: 3px solid #000000;
    }

利用伪元素实现

    .bl::after{
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        display: block;
        width: 3px;
        height: 100%;
        background-color: #000000;
    }

利用box-shadow阴影属性

    .bl{
        box-shadow: -3px 0px 0 0 #000000;
    }

利用filter 滤镜实现

    .bl{
        filter: drop-shadow(-3px 0px 0px #000000);
    }

利用背景颜色渐变

    .bl{
        background-image:linear-gradient(90deg,#000000 0px, #000000 5px,transparent 5px)
    }

转载于:https://www.cnblogs.com/D-Y-W/p/10577054.html

优惠劵

ailinyang8566

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现边框的几种方式

页面布局代码div{ position: relative; width: 200px; line-height: 50px; background-color:#666666; color: #fff; margin-left: 20px; margin-top: 20px; box-sizing: border-box...
复制链接

扫一扫