CSS--box-shadow

前言

本文主要是简单学习下box-shadow这一属性的使用方式，如有错误请大家多多指正！！

正题

简介

box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。

参数理解

1. X轴偏移量（h-shadow）
   这个值必需的，表示水平阴影的位置，允许负值
   正值阴影在右边，负值阴影在左边，0的时候阴影中盒子后面，看不见的，如果有blur值会有模糊效果
2. Y轴偏移量（v-shadow）
   这个值也是必需的，表示竖直阴影的位置，允许负值
3. 模糊半径（blur）
   非必须，表示模糊距离，值越大，阴影越模糊
4. 扩散半径（spread）
   非必须，表示阴影的大小，正值时阴影扩大，负值时阴影缩小，默认为0，和盒子同样大
5. 颜色（color）
   非必须，阴影的颜色，默认值为黑色
6. inset
   非必须，表示从外层的阴影(开始时)改变阴影内侧阴影

这里给的值会按上面的顺序依次赋值！！！

例子

首先我们给两个值试试看：

<div class="box"></div>

body{
   
            display: flex;
            justify-content: center;
            height: 700px;
            align-items: center;
        }
        .box{
   
            width: 200px;
            height: 200px;
            background-color: turquoise;
            box-shadow: 6px 6px;
        }

效果如下：

三个值呢？（阴影变模糊了）

.box{
   
            width: 200px;
            height: 200px;
            background-color: turquoise;
            box-shadow: 6px 6px 10px;
        }

四个值呢？（这里阴影扩散了！）

.box{
   
            width: 200px;
            height: 200px;
            background-color: turquoise;
            box-shadow: 6px 6px 10px 10px;
        }

五个值呢？（改变颜色）

.box{
   
            width: 200px;
            height: 200px;
            background-color: turquoise;