-webkit-text-stroke
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2017年4月以降、すべてのブラウザーで利用可能です。
-webkit-text-stroke は CSS のプロパティで、テキスト文字の輪郭線の幅と色を指定します。これは個別指定プロパティ -webkit-text-stroke-width および -webkit-text-stroke-color の一括指定プロパティです。
構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
css
/* 幅と色の値 */
-webkit-text-stroke: 4px navy;
/* グローバル値 */
-webkit-text-stroke: inherit;
-webkit-text-stroke: initial;
-webkit-text-stroke: revert;
-webkit-text-stroke: revert-layer;
-webkit-text-stroke: unset;
値
公式定義
| 初期値 | 一括指定の次の各プロパティとして
|
|---|---|
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 一括指定の次の各プロパティとして
|
| アニメーションの種類 | 一括指定の次の各プロパティとして |
形式文法
-webkit-text-stroke =
<line-width> ||
<color>
<line-width> =
<length [0,∞]> |
hairline |
thin |
medium |
thick
例
テキストに赤い輪郭線を追加
HTML
html
<p id="example">このテキストの輪郭線は赤です。</p>
CSS
css
#example {
font-size: 3em;
margin: 0;
-webkit-text-stroke: 2px red;
}
結果
仕様書
| 仕様書 |
|---|
| Compatibility # the-webkit-text-stroke |