CSS | 描边不透明度属性

在编写样式表时，我们通常会使用描边（stroke）来美化文本和图形。但有时候，我们需要控制描边的不透明度，以实现更多的效果。针对这个需求，CSS 提供了 stroke-opacity 属性。

stroke-opacity 属性

stroke-opacity 属性规定描边的不透明度，其取值范围为 0（完全透明）到 1（完全不透明）。默认值为 1。

语法

selector {
  stroke-opacity: value;
}

示例

下面是一个示例，演示了如何使用 stroke-opacity 属性。在这个例子中，我们为文本添加了一个淡绿色的描边，并把描边的不透明度设置为 0.7。

<h1 style="stroke: #33cc33; stroke-width: 2; stroke-opacity: 0.7;">
  Welcome to My Website
</h1>

说明

• 在上面的示例中，我们使用了内联样式（inline style）的方式来添加描边。当然，你也可以将其写到外部的 CSS 样式表文件中。
• stroke 属性用来设置描边的颜色；stroke-width 属性用来设置描边的宽度。
• 使用 stroke-opacity 属性可以让描边半透明化，从而使文本更加醒目、美观。

兼容性

目前，stroke-opacity 属性的浏览器兼容性如下：

• Chrome：4
• Firefox：4
• Safari：3
• Opera：15
• IE/Edge：不支持

尽管 stroke-opacity 属性有一些兼容性问题，但在许多情况下仍然可以使用，特别是在现代浏览器中。如果兼容性是你所担心的，请使用备用方案，如 PNG 透明图片，或者利用 HTML5 新增的 canvas 元素。