box-shadow阴影运用
CSS 中一大利器box-shadow为我们提供了非常强大的功能，了解他的语法掌握他的能力可以方便我们实现很多非常炫酷的效果。
首先我们看看定义。
.shadow{
box-shadow: inset x-offset y-offset blur spread color;
}
| 属性 | 说明 |
|---|---|
| inset | 可选。没有指定inset，默认阴影在边框外，即阴影向外扩散 |
| x-offset | 必需的。水平阴影的位置。允许负值 |
| y-offset | 必需的。垂直阴影的位置。允许负值 |
| blur | 可选。阴影模糊半径。允许负值 |
| spread | 可选。阴影扩散半径。允许负值 |
| color | 可选。阴影的颜色。 |
几乎可以在任何元素上使用box-shadow来添加阴影效果。如果元素同时设置了 border-radius属性 ，那么阴影也会有圆角效果。 由于box-shadow属性并不占据空间，所以无法响应事件。
/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;
/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
由于只能定义x轴或y轴偏移位置，左右或上下的对侧不能由一个阴影实现，所以我们分别用两个阴影偏移实现。下面是一些简单示例：
无阴影
内侧阴影
外侧阴影
上下阴影
左右阴影
模糊阴影
1px阴影
多重阴影
还可以这样
实践展示
光晕
{
"width": "40px",
"height": "40px",
"borderRadius": "50%",
"backgroundColor": "#fff",
"boxShadow": "0 0 60px 30px #fff,0 0 100px 60px #f0f,0 0 140px 100px #0ff"
}恒星
{
"width": "260px",
"height": "260px",
"borderRadius": "50%",
"boxShadow": "inset 0 0 50px #fff, inset 20px 0 80px #f0f, inset -20px 0 80px #0ff, inset 20px 0 300px #f0f, inset -20px 0 300px #0ff, 0 0 50px #eee,-10px 0 80px #f0f, 10px 0 80px #0ff"
}长阴影
配合伪元素和transform，可以实现长阴影效果，当然也可以使用函数叠加多层阴影实现，只是会更复杂。
div::before,
div::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
div::before {
transform-origin: 0 50%;
transform: translate(100%, 0) skewY(45deg) scaleX(.6);
background: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent);
}
div::after {
transform-origin: 0 0;
transform: translate(0%, 100%) skewX(45deg) scaleY(.6);
background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent);
}
日食
配合keyframes动画，可以实现简单日食效果
自定义工具
阴影自定义样式块
3px 3px 10px 3px #3A354C
Copy