box-shadow 和 outline 的多重边框之旅

人工智能89

利用box-shadow和outline设置多重边框

一、结论

  • box-shadow 和 outline 都不占据空间,border 占据空间。
  • box-shadow 可以设置多重边框,而 outline 只能设置两层。
  • outline 可以设置实线虚线等样式。
  • 经测试 box-shadow 和 outline 都会贴合元素变成圆角。

二、代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>&#x8FB9;&#x6846;</title>
<style type="text/css">
    body{
        background-color: pink;
    }
    div{
        width: 12%;
        line-height: 100px;
        margin-top: 50px;
        margin-left: 20px;
        text-align: center;
        border-radius: 20px;
    }
    /* 透明边框 */
    #transparent{
        background: white;
        border:10px solid hsla(0,0%,100%,.5);
        background-clip: padding-box;
    }
    /* 多重边框 */
    #box-shadow{
        background: white;
        box-shadow: 0 0 0 10px #655,
                    0 0 0 15px deeppink,
                    0 2px 5px 15px rgba(0,0,0,.6);
    }
    #outline{
        background: white;
        border: 10px solid #655;
        outline: 5px dashed deeppink;
        /* outline-offset: 10px; */
    }

</style>
</head>

<body>
    <div id="transparent">&#x5B9E;&#x73B0;&#x900F;&#x660E;&#x8FB9;&#x6846;</div>
    <div id="box-shadow">&#x901A;&#x8FC7;&#x9634;&#x5F71;&#x5B9E;&#x73B0;&#x591A;&#x91CD;&#x8FB9;&#x6846;</div>
    <div id="outline">&#x901A;&#x8FC7;outline&#x5B9E;&#x73B0;&#x591A;&#x91CD;&#x8FB9;&#x6846;</div>
</body>
</html>

三、效果

box-shadow 和 outline 的多重边框之旅

Original: https://www.cnblogs.com/sevenkiki/p/15831339.html
Author: 琪有此理
Title: box-shadow 和 outline 的多重边框之旅