前端奇淫巧技之多重边框

14 篇文章 0 订阅
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 啦。
通过这样的方式,我们就可以一次性设置出来多个阴影的边框啦。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值