CSS阴影的那些事儿

f

CSS中的阴影设置，可以让页面增加立体感。
一般情况下会有三种阴影：

1. 元素盒子产生阴影：box-shadow
2. 渲染文字后产生阴影：text-shadow
3. 滤镜下的阴影：filter: drop-shaodw()

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;

inset：指定在元素内部产生阴影。默认阴影是在元素边框外面。

实现一个拟态风格按钮：

div {
            width: 100px;
            height: 100px;
            background: #e9ecef;
            margin-bottom: 10px;
            border-radius: 5px;
            margin-right: 30px;
        }

        .outset {
            box-shadow: 7px 7px 12px rgba(0, 0, 0, .4),
                -7px -7px 12px rgba(255, 255, 255, .9);
        }

        .inset {
            box-shadow: inset -7px -7px 12px rgba(255, 255, 255, .9),
                inset 7px 7px 12px rgba(0, 0, 0, .4);
        }

那么要展示一个3D这样的效果的呢？

这就需要结合伪类来完成了：

HTML:
<div class="shodow"></div>

CSS:
        .shodow {
            position: relative;
        }

        .shodow::before,
        .shodow::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
        }

        .shodow::before {
            transform-origin: 0 50%;
            transform: translate(100%, 0) skewY(45deg) scaleX(0.6);
            background: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent);
            animation: shadowMoveY 5s infinite linear alternate;
        }
        .shodow::after {
            transform-origin: 0 0;
            transform: translate(0, 100%) skewX(45deg) scaleY(0.6);
            background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent);
            animation: shadowMoveX 5s infinite linear alternate;
        }
        @keyframes shadowMoveX {
            to {
                transform: translate(0%, 100%) skewX(50deg) scaleY(.6);
            }
        }

        @keyframes shadowMoveY {
            to {
                transform: translate(100%, 0) skewY(40deg) scaleX(.6);
            }
        }

text-shadow

text-shahow就是设置文本阴影了，在显示场景中，比例PPT的立体字体动画，在一个就是浮雕字体等等。

语法：

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;

/* Global values */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;

案例：

        p {
            background: #e9ecef;
            font-size: 20px;
            color: #999;
            margin-left: 100px;
            text-shadow: 1px 1px 1px #fff, -1px -1px 1px #000;
        }

就简单记录到这里了，已有会继续更新更多好玩的案例！