HTML-CSS小知识——box-shadow的使用_margin: -60px auto 100px;-优快云博客

本文链接：https://blog.youkuaiyun.com/jiongshaopeng/article/details/114363781

HTML-CSS小知识——box-shadow的使用

属性
- 基本属性的使用
- 附加说明

属性

box-shadow是给盒子添加阴影效果。

box-shadow: h-shadow v-shadow blur spread color inset;

基本属性的使用

h-shadow：必填，作用为水平阴影，可为负值
v-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{
            width: 300px;
            height: 300px;
            background-color: red;
            border: 10px solid green;
            margin: 60px auto;

            box-shadow: 20px 100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

	box-shadow:20px 100px;

这时box-shadow只填两个必填值，效果如下
20px 100px

当h-shadow为负值时，就是向左移动阴影，相应的v-shadow为负值就向上移动阴影

	box-shadow:-20px 100px;

-20px 100px

blur为模糊距离，就是把阴影边缘进行模糊化。当填入三个数值时，第三个值就为blur

box-shadow: h-shadow v-shadow blur

	box-shadow:50px 100px 10px;

50px 100px 10px

spread将阴影向外延申，相当于给已有的阴影增加边框（用边框较容易理解）。这时box-shadow已填入四个数值，那第四个数值就是spread。

	box-shadow:50px 100px 10px 40px;

50px 100px 10px 40px

为了更好地体现边框的理解，可以把前三个数值设置为0

	box-shadow:0 0 0 40px;

0 0 0 40px

color设置阴影的颜色，inset为将外部阴影（默认ouset）改为内部阴影

	padding: 10px;
	box-shadow: 0 0 0 10px blue inset;

0 0 0 10px blue inset
注意：内部阴影的h-shadow和v-shadow是从边框往里算的，就是内容+内边距里产生阴影

附加说明

box-shadow通过逗号连接可产生多个阴影叠加效果

	box-shadow:-10px -10px 0 blue, 0px -20px 0 black;

-10px -10px 0 blue, 0px -20px 0 black
注意：外部阴影的h-shadow和v-shadow是从边框外算的。由上图还可以知道前面的阴影会在后面的阴影的上一层（产生覆盖的现象）。

此文章如有不足之处，希望大家在评论区一起交流哦！谢谢大家！！！