/这是比如pink的宽150高150的东西，然后是x往右20 往下50的移动/
兄弟们,记住一句核心：右下为正，左下为负。
记住哈，兄弟们，移动只有两个哈，xy轴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-shadow</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<style type="text/css">
div{
width: 150px;
height: 150px;
border:5px solid #abcdef;
background-color: #f80;
margin:50px 100px;
}
.box1{
box-shadow: 0 10px pink;
}
.box2{
box-shadow: 0 -10px pink;
}
.box3{
box-shadow: 10px 0 pink;
}
.box4{
box-shadow: -10px 0 pink;
}
.box5{
box-shadow:10px 10px rgba(0,0,0,.5);
}
.box6{
box-shadow: -10px -10px rgba(0,0,0,.5);
}
.box7{
box-shadow:-10px -10px 5px rgba(0,0,0,.5);
/* /*低则透明，高则不透明*/*/
}
.box8{
box-shadow:7px 7px 10px 5px rgba(50, 50, 50, 0.75);
/*/*第三个是阴影模糊值,第四个是阴影的大小，后面分别是红色 绿色 蓝色和透明度*/
}
.box9{
box-shadow: inset 10px 10px 5px rgba(0,0,0,.5);
/*inset内部效果，outset外部效果*/
}
.box10{
box-shadow:0 -10px 5px red,10px 0 5px green,0 10px 5px blue,-10px 0 5px yellow;
/*联合使用，也就是当这样的时候，上 右 下 左，自己体会就理解了呀*/
}
.box11{
box-shadow:inset 0 -10px 5px red,10px 0 5px green,inset 0 10px 5px blue,-10px 0 5px yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
<div class="box10"></div>
<div class="box11"></div>
</body>
</html>
效果图：
原创文章 107
获赞 14
访问量 1347