css阴影效果

/* 示例代码：CSS 阴影效果 */

/* 1. 简单的盒子阴影 */
.box-shadow-basic {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    box-shadow: 10px 10px 5px grey; /* 水平偏移 | 垂直偏移 | 模糊半径 | 颜色 */
}

/* 2. 多重阴影效果 */
.box-shadow-multiple {
    width: 200px;
    height: 200px;
    background-color: lightgreen;
    box-shadow: 10px 10px 5px grey, -10px -10px 5px rgba(0, 0, 0, 0.3); /* 多个阴影用逗号分隔 */
}

/* 3. 内阴影 */
.box-shadow-inset {
    width: 200px;
    height: 200px;
    background-color: lightcoral;
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5); /* inset 关键字用于创建内阴影 */
}

/* 4. 文字阴影 */
.text-shadow {
    font-size: 2em;
    color: white;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* 水平偏移 | 垂直偏移 | 模糊半径 | 颜色 */
}

解释说明：

• box-shadow：用于给元素添加阴影效果。参数依次为水平偏移、垂直偏移、模糊半径和颜色。
• inset：表示内阴影，通常用于创建凹陷效果。
• text-shadow：专门用于文本的阴影效果，参数与 box-shadow 类似。
• 多重阴影：可以通过逗号分隔多个阴影效果，适用于需要复杂视觉效果的场景。