box-shadow（盒⼦阴影）
box-shadow属性可以设置⼀个或多个下拉阴影的框
可以在同⼀个元素上设置多个阴影效果，并⽤逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜⾊。
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
div.box{
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜⾊ */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
参数详解
h-shadow必需的。⽔平阴影的位置。允许负值
v-shadow必需的。垂直阴影的位置。允许负值
blur可选。模糊距离
spread可选。阴影的⼤⼩
color可选。阴影的颜⾊。在寻颜⾊值的完整列表
inset可选。从外层的阴影（开始时）改变阴影内侧阴影
注意：这⾥inset参数只能设置在第⼀或者最后，其他位置⽆效！
        ===直接上代码===
（1）h-shadow和v-shadow两个值表⽰阴影的偏移量
box shadow怎么设置<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
margin: 20px;
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
}
.box1{
box-shadow: 10px 10px blue;
}
.box2{
box-shadow: -10px -10px blue;
}
.box3{
box-shadow: -10px 10px blue;
}
.box4{
box-shadow: 10px -10px blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
结论：从上⾯结果可以看出，两个属性值可以取正值也可以取负值，并且⽅向为坐标系取值⽅向相同（x轴正值向右负值向左，y轴正值向下负值向上）
（2）blur属性值表⽰阴影的模糊距离/半径（可选）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
margin: 20px;
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
}
.box1{
/* 模糊距离为5 */
box-shadow: 10px 10px 5px blue;
}
.box2{
/
* blur值为0等同于没设置模糊距离，没有模糊效果 */
box-shadow: -10px -10px 0px blue;
}
.box3{
/* blur值不能为负数，为负数则阴影失效 */
box-shadow: -10px 10px -5px blue;
}
.box4{
/* blur值越⼤越模糊 */
box-shadow: -10px 10px 20px blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
结论：如果不写该参数或者该参数为0则阴影完全实⼼，没有模糊效果，并且该值越⼤阴影越模糊
（3）spread属性值表⽰设置的阴影⼤⼩（可选）
这个值可以被看作是从元素到阴影的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
margin: 20px;
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
}
.box1{
/* spread为0（默认值） */
box-shadow: 0px 0px 10px 0px blue;
}
.box2{
/* spread为5(正值会在元素的四个⽅向延伸阴影) */
box-shadow: 0px 0px 10px 5px blue;
}
.box3{
/* spread为-1(负值会使阴影变得⽐元素本⾝尺⼨还要⼩) */
box-shadow: 0px 0px 10px -1px blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
结论：
默认值“0”会让阴影变得得和元素的⼤⼩⼀样（⽆设置）
正值会在元素的四个⽅向延伸阴影
负值会使阴影变得⽐元素本⾝尺⼨还要⼩
（4）color属性值指定阴影的颜⾊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<style>
div{
margin: 20px;
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
}
.
box1{
/* color值表⽰阴影颜⾊ */
box-shadow: 0px 0px 10px 5px blue;
}
.box2{
box-shadow: 0px 0px 10px 5px green;
}
.box3{
box-shadow: 0px 0px 10px 5px orange;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
（5）inset设置阴影为内侧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<style>
div{
margin: 20px;
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
}
.
box1{
box-shadow: 0px 0px 10px 5px blue;
}
.box2{
/* inset设置阴影为内侧阴影 */
box-shadow: 0px 0px 10px 5px blue inset;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
⾄此，box-shadow盒⼦阴影属性已经介绍完毕

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。