css 字体阴影

作者：穹上之月发布日期:2026-02-11 浏览:76

/* CSS 字体阴影示例 */

/* 基本字体阴影 */
h1 {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

/* 解释：
- 2px：水平偏移量，正值表示向右偏移。
- 2px：垂直偏移量，正值表示向下偏移。
- 5px：模糊半径，值越大阴影越模糊。
- rgba(0, 0, 0, 0.5)：阴影的颜色和透明度，这里表示半透明的黑色。
*/

/* 多重阴影效果 */
p {
  text-shadow: 
    1px 1px 2px red,
    2px 2px 3px blue,
    3px 3px 4px green;
}

/* 解释：
- 可以通过逗号分隔多个阴影效果，每个阴影的效果参数与基本阴影相同。
*/

上一篇：css布局的几种方式