css 阴影效果

/* 简单的 CSS 阴影效果 */

/* 1. 外阴影 (box-shadow) */
div {
    width: 200px;
    height: 200px;
    background-color: lightblue;

    /* box-shadow 属性参数解释：
       水平偏移量 | 垂直偏移量 | 模糊半径 | 扩展半径 | 颜色 */
    box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.75);
}

/* 2. 内阴影 (inset) */
div.inset-shadow {
    width: 200px;
    height: 200px;
    background-color: lightcoral;

    /* inset 关键字用于创建内阴影 */
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5);
}

/* 3. 文本阴影 (text-shadow) */
h1 {
    font-size: 36px;
    color: white;

    /* text-shadow 属性参数解释：
       水平偏移量 | 垂直偏移量 | 模糊半径 | 颜色 */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

这段代码展示了三种常见的 CSS 阴影效果：外阴影、内阴影和文本阴影。每种效果都通过不同的属性和参数来实现，具体解释已在注释中给出。