css文字描边

/* CSS文字描边示例 */

/* 使用 text-stroke 属性（仅在WebKit浏览器中有效） */
.text-stroke-webkit {
    -webkit-text-stroke: 2px black; /* 设置描边宽度和颜色 */
    color: white; /* 设置文字颜色 */
}

/* 使用 text-shadow 属性实现描边效果（兼容性更好） */
.text-stroke-shadow {
    text-shadow: 
        1px 1px 0 #000, /* 右下方向的阴影 */
        -1px -1px 0 #000, /* 左上方向的阴影 */
        1px -1px 0 #000, /* 右上方向的阴影 */
        -1px 1px 0 #000; /* 左下方向的阴影 */
    color: white; /* 设置文字颜色 */
}

解释说明：

1. -webkit-text-stroke:

   • 这个属性用于给文字添加描边效果，适用于 WebKit 内核的浏览器（如 Chrome 和 Safari）。你可以通过设置描边的宽度和颜色来控制描边的样式。

2. text-shadow:

   • 通过使用 text-shadow 属性，可以模拟出类似描边的效果。通过在不同方向上添加多个阴影，形成一个均匀的描边效果。这种方法具有更好的浏览器兼容性。

如果你需要更复杂的描边效果，可以根据需求调整这些属性的值。