带白边的黑字 css

当我们需要给网页上的文本增加特效的时候，可以利用CSS的文本样式来实现。其中一种比较常见的文本样式是带白边的黑字CSS。

要实现这种文本样式，需要使用text-stroke属性，该属性可以设置文字描边的样式，其语法格式如下：

/* 带白边的黑字 */
color: #000;
text-stroke: 1px #fff;

其中color属性表示文字的颜色，这里设置为黑色（#000），text-stroke属性表示文字的描边样式，这里设置1像素宽的白色边框（#fff）。

如果想要增加描边的宽度，可以修改text-stroke的像素值。如果想要改变描边的颜色，可以修改#fff为其他颜色值。

示例1：

<p class="text-stroke">这是一段带白边的黑字文本</p>

.text-stroke {
  color: #000;
  text-stroke: 1px #fff;
}

以上代码将会在页面上展示一段带白边的黑字文本。

示例2：

<h1 class="text-stroke">这是一段标题</h1>

.text-stroke {
  color: #000;
  text-stroke: 2px rgba(255, 255, 255, 0.5);
}

以上代码将会在页面上展示一个带有2像素宽、50%透明度的白色边框的标题。

需要注意的是，目前text-stroke属性只有Chrome、Safari、和Opera浏览器才支持，其他浏览器不支持或支持较差。