css 阴影

/* 简单的 CSS 阴影示例 */

/* 1. 外阴影 (box-shadow) */
.box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    box-shadow: 10px 10px 5px grey; /* 水平偏移量 垂直偏移量 模糊半径 颜色 */
}

/* 2. 内阴影 (inset) */
.inner-shadow {
    width: 200px;
    height: 100px;
    background-color: lightgreen;
    box-shadow: inset 5px 5px 10px grey; /* inset 关键字表示内阴影 */
}

/* 3. 文本阴影 (text-shadow) */
.text-shadow {
    font-size: 24px;
    color: white;
    text-shadow: 2px 2px 5px red; /* 水平偏移量 垂直偏移量 模糊半径 颜色 */
}

解释说明：

• 外阴影 (box-shadow)：应用于元素的外部，可以通过设置水平和垂直偏移量、模糊半径以及颜色来创建阴影效果。
• 内阴影 (inset)：通过在 box-shadow 中添加 inset 关键字，可以使阴影出现在元素的内部。
• 文本阴影 (text-shadow)：专门用于文本的阴影效果，同样可以通过设置水平和垂直偏移量、模糊半径以及颜色来调整。