简单掌握CSS3将文字描边及填充文字颜色的方法

下面是关于“简单掌握CSS3将文字描边及填充文字颜色的方法”的攻略:

CSS3文字描边及填充方法

在CSS3中，我们可以通过使用text-stroke和-webkit-text-stroke属性轻松地为文字添加轮廓线和外部描边。

1. 描边

要添加轮廓线或描边，我们可以使用以下CSS样式:

/* 加粗文本 */
bold {
  stroke: black;
  stroke-width: 3px;
  fill: transparent;
}

解释一下这些样式:

• stroke: 线条的颜色，可以使用命名颜色也可以使用十六进制或RGB颜色代码。
• stroke-width: 线条的宽度，以像素为单位。
• fill: 填充颜色，设置为透明即可使描边生效。

这是一个例子：

<p><strong class="stroke">这是一些文本。</strong></p>

.stroke {
  stroke: #999999;
  stroke-width: 2px;
  fill: transparent;
}

2. 填充

我们可以使用fill属性与text-fill-color属性轻松地为文本添加填充颜色。以下是CSS样式:

/* 加粗文本 */
bold {
  fill: black;
  -webkit-text-fill-color: transparent;
}

解释一下这些样式：

• fill: 填充颜色，可以使用命名颜色、十六进制或RGB颜色代码。
• -webkit-text-fill-color: 设为透明，可以隐藏填充颜色。

这是一个例子：

<p><strong class="fill">这是一些文本。</strong></p>

.fill {
  fill: #ff0000;
  -webkit-text-fill-color: transparent;
}

最后注意：要在各种各样的浏览器中都正确地显示文本描边或填充，我们需要在CSS样式中添加相应的厂商前缀，以确保兼容性。