多重边框
如果我们要做如下的相框效果,一般情况下,可以采取多个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 啦。
通过这样的方式,我们就可以一次性设置出来多个阴影的边框啦。