前端奇淫巧技之多重边框

最新推荐文章于 2022-04-18 00:38:29 发布

ClaireKe

最新推荐文章于 2022-04-18 00:38:29 发布

阅读量746

点赞数

分类专栏： html+css相关随笔 Web开发

本文链接：https://blog.csdn.net/ClaireKe/article/details/53608844

版权

随笔同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

Web开发

14 篇文章 0 订阅

订阅专栏

html+css相关

5 篇文章 0 订阅

订阅专栏

多重边框

如果我们要做如下的相框效果，一般情况下，可以采取多个div嵌套加样式的写法。

代码可能是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style type="text/css">
        .div_5{
            width: 500px;
            height: 300px;
            background: #fff;
        }
        .div_4 , .div_3 , .div_2 , .div_1{
            background: rgba(0,0,0,.2);
            padding: 10px;
        }
        .div_4{
            width: 500px;
            height: 300px;
        }
        .div_3{
            width: 520px;
            height: 320px;
        }
        .div_2{
            width: 540px;
            height: 340px;
        }
        .div_1{
            width: 560px;
            height: 360px;
        }
    </style>
</head>
<body>
    <div class="div_1">
        <div class="div_2">
            <div class="div_3">
                <div class="div_4">
                    <div class="div_5"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

实际上，我们可以用box-shadow来做，比如下面这个效果：

要做这个头像效果是很简单的，代码如下：

/*css代码*/
 .box {
     box-shadow: 0 0 0 17px rgba(255, 0, 0, 0.4),
                 0 0 0 20px rgba(255, 255, 255, 0.3),
                 0 0 0 37px rgba(255, 0, 0, 0.4),
                 0 0 0 40px rgba(255, 255, 255, 0.3);
     height: 180px;
     margin: 50px;
     width: 180px;
     border-radius:150px;
}
.box img {
    height: 180px;
    width: 180px;
    border-radius:100px;
}

     <div class="box">
        <img  src="http://tupian.qqjay.com/tou3/2016/0829/be0ce4668dc213366924782a40a12985.jpg"/>
     </div>

很简单吧，box-shadow 其实是可以设置多层的，只需要在模糊半径设置后面再追加一个阴影的距离就 OK 啦。
通过这样的方式，我们就可以一次性设置出来多个阴影的边框啦。

ClaireKe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端奇淫巧技之多重边框

多重边框如果我们要做如下的相框效果，一般情况下，可以采取多个div嵌套加样式的写法。代码可能是这样的：……
复制链接

扫一扫

专栏目录