文字描邊寬度text-stroke-width

Setting the width of the stroke for text characters.

Overview

Examples

Set text stroke width

Use text-stroke:* with a length to control only the stroke width.

<h2 class="text-stroke:2px text-stroke:blue-60">    Thick outline</h2>

@layer utilities {    .text-stroke\:2px {        -webkit-text-stroke-width: 2px    }}

Use the explicit property name

text-stroke-width:* is also supported when the property name makes the intent clearer.

<h2 class="text-stroke-width:1px text-stroke:blue-60">    Thin outline</h2>

Remove the stroke width

Use text-stroke:0 to remove the visible stroke in a condition.

<h2 class="text-stroke:1px text-stroke:0@print">    Printed without stroke</h2>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<h2 class="text-stroke:2px:hover text-stroke:1px@sm text-stroke:0@print">...</h2>