css字体描边

作者：拽一个给爷看发布日期:2025-02-16 浏览:131

/* CSS字体描边示例代码 */

/* 使用 text-shadow 属性实现字体描边效果 */
h1 {
  color: white; /* 文字颜色 */
  text-shadow: 
    1px 1px 0 #000,   /* 右下方向的黑色描边 */
    -1px -1px 0 #000, /* 左上方向的黑色描边 */
    1px -1px 0 #000,  /* 右上方向的黑色描边 */
    -1px 1px 0 #000;  /* 左下方向的黑色描边 */
}

/* 或者使用 -webkit-text-stroke 实现更简单的描边效果 */
h2 {
  color: white; /* 文字颜色 */
  -webkit-text-stroke: 1px black; /* 描边宽度和颜色 */
}

解释说明：

text-shadow 方法：通过在 text-shadow 中定义多个阴影，模拟出文字的描边效果。每个阴影的方向和颜色可以自由调整。
-webkit-text-stroke 方法：直接使用 -webkit-text-stroke 属性来设置描边的宽度和颜色，代码更简洁，但兼容性可能不如 text-shadow 广泛。

上一篇：css 设置字体

下一篇：css 渐变边框