css文字边框

作者：孤独的角落发布日期:2026-06-30 浏览:43

/* 使用 CSS 实现文字边框效果 */

.text-border {
  /* 设置文字颜色为透明 */
  color: transparent;

  /* 设置文字边框的宽度、样式和颜色 */
  text-shadow: 
    1px 1px 0 #000,   /* 右下 */
    -1px 1px 0 #000,  /* 左下 */
    1px -1px 0 #000,  /* 右上 */
    -1px -1px 0 #000; /* 左上 */

  /* 或者使用 text-stroke 属性（仅适用于部分浏览器） */
  /* -webkit-text-stroke: 2px #000; */
}

/* 示例 HTML */
/*
<span class="text-border">Hello World</span>
*/

解释说明：

color: transparent;：将文字颜色设置为透明，这样只显示边框。
text-shadow：通过在文字周围添加阴影来模拟边框效果。每个值分别表示水平偏移、垂直偏移、模糊半径和颜色。
-webkit-text-stroke：这是另一种实现文字边框的方法，但仅在支持 WebKit 引擎的浏览器中有效（如 Chrome 和 Safari）。

上一篇：css圆角边框

下一篇：css 自适应