在我初学前端时，每次碰到有元素阴影时都要搜好久，下定决心，一定要搞懂每个属性的意义，自由变幻阴影样式！

在我初学前端时，每次碰到有元素阴影时都要搜好久，下定决心，一定要搞懂每个属性的意义，自由变幻阴影样式！

刚开始学习前端开发的时候css路线盒子上面的阴影，每遇到涉及元素阴影的问题，我都要花费大量时间去搜索资料。于是，我下定决心，必须彻底理解每个相关属性的具体含义，以便能够随心所欲地调整和变换阴影效果。

最基础的四周阴影

其运作机制在于，盒子的背面呈现着rgb(156, 156, 156)的色彩css路线盒子上面的阴影，对该盒子实施高斯模糊处理，随后进行放大，这样它才会显得比前面的盒子更大在我初学前端时，每次碰到有元素阴影时都要搜好久，下定决心，一定要搞懂每个属性的意义，自由变幻阴影样式！，进而进入我们的视线。

box-shadow: 0 0 20px 2px rgb([id_2121615931], 156, 156);

四周内阴影

box-shadow: 0 0 20px 2px rgb(156, 156, 156) inset;

左右阴影

其运作机制如下：首先进行模糊处理，接着对后方的区域进行细致的缩小在我初学前端时，每次碰到有元素阴影时都要搜好久，下定决心，一定要搞懂每个属性的意义，自由变幻阴影样式！，之后进行左右移动操作，此时视线所及仅限于左右两侧。

box-shadow: 12px 0 10px -8px rgb(212, 212, 212),
            -12px 0 10px -8px rgb(212, 212, 212);

同理上下阴影

box-shadow: 0 12px 10px -8px rgb(212, 212, 212),
            0 -12px 10px -8px rgb(212, 212, 212);

多个阴影

在阴影区域，我们成功构建了三个独立阴影，并对它们各自进行了独特的位置调整！

box-shadow: 3px 3px yellow, 
            8px 8px blue,
            12px 12px black;

=> 最后附上每个值的意义

设置阴影：水平阴影（正值使阴影向右扩展，负值则向左移动，必须填写）, 垂直阴影（正值导致阴影向下扩展，负值则向上移动，必须填写）, 模糊程度（模糊度越高，阴影越透明css路线盒子上面的阴影，可选项）, 扩展量（2像素，阴影向四周扩散2像素，负值表示收缩）, 阴影颜色（默认为黑色）, 阴影类型（内阴影或外阴影，默认为外阴影）。