css揭秘之半透明边框与多重边框_css logo边框-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43209768/article/details/103247484

1.实现如下图的结果
在这里插入图片描述
第一反应是如下代码
hsla颜色解释

<style>
        body,
        html {
            background: #ccc;
            padding: 50px;
        }
        
        div {
            width: 200px;
            height: 100px;
            padding: 10px;
            background: white;
            border: 15px solid hsla(0, 0%, 100%, .5);
        }
    </style>
</head>

<body>
    <div>听说今天的合肥下雪了，2019年11月25日</div>
</body>

但是结果却是这样的，我们并没有让div的背景从半透明白色边框处透出来，而是在半透明白色边框处透出了这个容器自己的纯白实色背景
在这里插入图片描述
可以采用background-clip属性来解决这个问题，其默认值是border-box,意味着背景会被元素的border box裁切掉，如果不希望背景侵入边框所在的范围，只需要将这个值设置为padding-box,效果如下：

 
        div {
            width: 200px;
            height: 100px;
            padding: 10px;
            background: white;
            border: 15px solid hsla(0, 0%, 100%, .5);
            background-clip: padding-box;
        }

2.实现如下多重边框的效果
在这里插入图片描述
可以采用box-shadow多重阴影来实现，box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式],只要将其前三个值都设置为0，阴影扩张半径设置为正值，得到的投影其实就像是实线边框，它支持逗号分隔语法，因此我们可以创建任意数量的投影，需要注意的是，以这种形式创建的边框出现在元素的外圈，他们不会响应鼠标事件，如果需它响应的话，可以为box-shadow添加一个inset属性，但此时你需要增加额外的内边距。
在这里插入图片描述
代码如下

   body,
        html {
            background: #ccc;
            padding: 50px;
        }
        
        div {
            width: 200px;
            height: 100px;
            padding: 25px;
            background: yellowgreen;
            box-shadow: 0 2px 5px -2px rgba(0, 0, 0, .6) inset, 0 0 0 5px deeppink inset, 0 0 0 15px #655 inset;
        }
        
        div:hover {
            background: red;
        }

在某些情况下，如果你只需要两层边框，可以采用描边属性outline,实现的效果几乎是一摸一样的

   body,
        html {
            background: #ccc;
            padding: 50px;
        }
        
        div {
            width: 200px;
            height: 100px;
            padding: 10px;
            background: yellowgreen;
            border: 10px solid #655;
            outline: 5px solid deeppink;
        }