box-shadow
CSS中的阴影样式，从简单到炫酷
1、介绍box-shadow
案例1：
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>给边框设置阴影</title>
<style>
body{
/*为了满足老夫的少女心,先来个粉红色背景*/
background: pink;
}
div{
width: 100px;
height: 100px;
margin: 200px;
border: 1px solid #fff;
/*给所有的div来个统一的样式,100*100的小白框框*/
}
/*分开看每个div的效果*/
.div1{
/*前面两位为阴影的x和y,x控制水平方向(为正值时阴影在右边,负值则在左边),
y控制垂直方向(为正值时阴影在下边,负值则在上边)*/
/*给div1设置右边和下边的阴影*/
/*box-shadow:x y color;*/
box-shadow: 10px 10px #fff;
}
.div2{
/*给div2设置左边和上边的阴影*/
box-shadow: -10px -10px #fff;
}
.div3{
/*box-shadow:x y blur color;*/
/*box-shadow的第三位数为设置阴影的模糊距离*/
/*给它设置阴影的模糊距离*/
box-shadow: 0px 0px 20px #fff;
}
.div4{
/*box-shadow:x y blur spread color;*/
/*box-shadow的第四位数为设置阴影的大小*/
/*我的x和y的阴影都是0，阴影的模糊距离也是0 和阴影的大小是10px*/
box-shadow: 0px 0px 0px 10px #fff ;
}
.div5{
/*我的x和y的阴影都是10，阴影的模糊距离也是10 和阴影的大小是10px*/
box-shadow: 10px 10px 20px 10px #fff ;
}
.div6{
box-shadow:-10px 0px 10px white, /*左边阴影*/
0px -10px 10px cornflowerblue, /*上边阴影*/
10px 0px 10px darkseagreen, /*右边阴影*/
0px 10px 10px mediumpurple; /*下边阴影*/
}
.div7{
/*box-shadow:x y blur spread inset color;*/
box-shadow: 0px 0px 10px 0px inset red ;
}
</style>
</head>
<body>
<div class="div1">
我是第1个，我的阴影在右边和下边
</div>
<div class="div2">
我是第2个，我的阴影在左边和上边
</div>
<div class="div3">
我是第3个，我有20px的模糊距离
</div>
<div class="div4">
我是第4个，我有10px的阴影大小
</div>
<div class="div5">
我是第5个，我的阴影在右边和下边，并且我有20px的模糊距离和阴影的大小是10px
</div>
<div class="div6">
我是第6个，我不同的边框有不同的颜色
</div>
<div class="div7">
我是第7个，我有内阴影
</div>
</body>
</html>
案例2：
卷边阴影
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的阴影</title>
<style type="text/css">
body {
background: pink;
}
.box-shadow {
width: 300px;
line-height: 150px;
position: relative;
background: #ccc;
margin: 100px auto;
border-radius: 10px;
text-align: center;
color: pink;
}
.box-shadow:before,
.box-shadow:after {
content: "";
position: absolute;
z-index: -1;
bottom: 13px;
left: 10px;
width: 50%;
max-width: 150px;
height: 20%;
-webkit-box-shadow: 0 17px 15px rgba(125, 125, 125, 0.8);
-moz-box-shadow: 0 17px 15px rgba(125, 125, 125, 0.8);
box-shadow: 0 17px 15px rgba(125, 125, 125, 0.8);
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.box-shadow:after {
right: 10px;
left: auto;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}
</style>
</head>
<body>
<div class="box-shadow">我的阴影</div>
</body>
</html>
效果：
