语法
box-shadow:
offset-x offset-y blur spread color position;
对象选择器 {box-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式 }
1.offset-x
第一个长度值指明了阴影水平方向的偏移,即阴影在 x 轴的位置。值为正数时,阴影在元素的右侧;值为负数时,阴影在元素的左侧。
<!DOCTYPE html>
<html>
<head>
<META CHARSET="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 300px;
background-color: #02004b;
}
.left {
margin: 30px;
width: 100px;
height: 60px;
background-color: goldenrod;
box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5)
}
.right {
margin: 30px;
width: 100px;
height: 60px;
background-color: goldenrod;
box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5)
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
</div>
<div class="right"></div>
</body>
</html>
2. offset-y
第二个长度值指明了阴影竖直方向的偏移,即阴影在 y 轴的位置。值为正数时,阴影在元素的下方;值为负数时,阴影在元素的上方。
<!DOCTYPE html>
<html>
<head>
<META CHARSET="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 300px;
background-color: #02004b;
}
.left {
margin: 30px;
width: 100px;
height: 60px;
background-color: goldenrod;
box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5)
}
.right {
margin: 30px;
width: 100px;
height: 60px;
background-color: goldenrod;
box-shadow: 0px -20px 10px 0px rgba(0,0,0,0.5)
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
</div>
<div class="right"></div>
</body>
</html>
3.blur
第三个长度值代表了阴影的模糊半径,举例来说,就是你在设计软件中使用 高斯模糊 滤波器带来的效果。值为 0 意味着该阴影是固态而锋利的,完全完全没有模糊效果。blur 值越大,阴影则更不锋利而更朦胧 / 模糊。负值是不合法的,会被修正成 0。
<!DOCTYPE html>
<html>
<head>
<META CHARSET="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 300px;
background-color: #02004b;
}
.left {
margin: 30px;
width: 100px;
height: 60px;
background-color: goldenrod;
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5)
}
.right {
margin: 30px;
width: 100px;
height: 60px;
background-color: goldenrod;
box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5)
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
</div>
<div class="right"></div>
</body>
</html>
4.spread
第四个长度代表了阴影扩展半径,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值是,则缩小。前提是存在阴影模糊半径。
<!DOCTYPE html>
<html>
<head>
<META CHARSET="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 300px;
background-color: #02004b;
}
.left {
margin: 30px;
width: 100px;
height: 60px;
background-color: goldenrod;
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5)
}
.right {
margin: 30px;
width: 100px;
height: 60px;
background-color: goldenrod;
box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.5)
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
</div>
<div class="right"></div>
</body>
</html>
5.color
color 部分的值是指阴影的颜色。它可以是任意的颜色单元
<!DOCTYPE html>
<html>
<head>
<META CHARSET="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 300px;
background-color: #02004b;
}
.left {
margin: 30px;
width: 100px;
height: 60px;
background-color: goldenrod;
box-shadow: 0px 0px 20px 10px #67b3dd
}
.right {
margin: 30px;
width: 100px;
height: 60px;
background-color: goldenrod;
box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5)
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
</div>
<div class="right"></div>
</body>
</html>