CSS-实现文字描边效果

李是啥也不会

于 2024-09-05 10:00:00 发布

阅读量374

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/QQ1257871322/article/details/141872849

版权

在 CSS 中实现文字描边效果可以通过几种不同的方法。以下是一些常见的技巧和示例：

1. 使用 `text-shadow`

text-shadow 属性可以创建类似于文字描边的效果。通过多次应用阴影，模拟出描边的效果：

.stroked-text {
  font-size: 48px;
  color: white; /* 文字颜色 */
  text-shadow: 
    -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px  1px 0 #000,
    1px  1px 0 #000; /* 描边颜色 */
}

在这个例子中，text-shadow 被用来创建四个阴影，模拟了文字的描边效果。你可以根据需要调整阴影的偏移量和颜色来实现不同的效果。

2. 使用 SVG

对于更复杂的文字描边效果，使用 SVG 可以提供更大的灵活性。可以创建一个 SVG 文本元素，并在其中使用 stroke 属性来实现描边：

<svg width="400" height="100">
  <text x="10" y="40" font-family="Verdana" font-size="35" fill="white" stroke="black" stroke-width="1">
    描边文字
  </text>
</svg>

在这个例子中，stroke 用来设置文字的描边颜色，stroke-width 用来设置描边的宽度。

3. 使用 `-webkit-background-clip`

另一个创建文字描边效果的技巧是使用 background-clip 与 background 结合，通过背景色和剪裁实现：

<div class="text-outline">
  描边文字
</div>

.text-outline {
  font-size: 48px;
  font-weight: bold;
  color: transparent;
  background: linear-gradient(black, black) no-repeat;
  background-clip: text;
  -webkit-background-clip: text; /* For WebKit browsers */
  text-shadow: 0 0 1px black;
}

在这个例子中，background-clip: text 使背景只应用于文字部分，而 text-shadow 为文字添加了额外的阴影效果。

4. 使用 CSS Masking

CSS Masking 可以用于更复杂的文字效果：

<div class="text-outline">
  <span class="stroke">描边文字</span>
</div>

.text-outline {
  position: relative;
  font-size: 48px;
}

.stroke {
  color: transparent;
  background: black;
  -webkit-background-clip: text;
  background-clip: text;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.text-outline::before {
  content: '描边文字';
  position: absolute;
  top: 0;
  left: 0;
  font-size: 48px;
  color: white;
  z-index: 1;
  -webkit-text-stroke: 1px black;
}