【css】实现多重边框

最新推荐文章于 2022-10-12 14:02:59 发布

richest_qi

最新推荐文章于 2022-10-12 14:02:59 发布

阅读量350

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qzw752890913/article/details/107917139

版权

css 专栏收录该内容

69 篇文章 4 订阅

订阅专栏

<body>
    <div class="box"></div>
</body>

div{
    margin:100px auto 0 auto; 
    width:100px;
    height:100px;
    background-color:lightyellow;
}

实现多重边框，有两种方式。

第一种：使用box-shadow的扩张半径

.box{
    box-shadow:0 0 0 5px lightskyblue;
    box-shadow:0 0 0 5px lightskyblue,
    0 0 0 10px lightseagreen;
}

box-shadow的扩张半径和border类似，但又不同于border，因为box-shadow不占据流空间，不会影响布局。

第二种：border+outline

.box{
    border:5px solid lightskyblue;
    outline:5px solid lightseagreen;

    /* border-width: 5px;
    border-style: solid;
    border-color: lightskyblue;

    outline-width: 5px;
    outline-style: solid;
    outline-color: lightseagreen; */
}

outline:outline-width outline-style outline-color;
border:border-width border-style border-color;
outline和border更相似，不同的是，outline也不占据流空间，不会影响布局。

在这里插入图片描述