-webkit-text-stroke-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。

-webkit-text-stroke-color は CSS のプロパティで、テキストの文字の線の色を示します。このプロパティが設定されない場合、 color プロパティの値が使用されます。

css

/* <color> 値 */
-webkit-text-stroke-color: red;
-webkit-text-stroke-color: #e08ab4;
-webkit-text-stroke-color: rgb(200, 100, 0);

/* グローバル値 */
-webkit-text-stroke-color: inherit;
-webkit-text-stroke-color: initial;
-webkit-text-stroke-color: unset;

構文

値

<color>: 線の色。

公式定義

初期値	`currentcolor`
適用対象	すべての要素
継承	あり
計算値	色の計算値
アニメーションの種類	色

形式文法

-webkit-text-stroke-color = 
  <color>

例

角の色を変化させる

HTML

html

<p>Text with stroke</p>
<input type="color" value="#ff0000" />

CSS

css

p {
  margin: 0;
  font-size: 4em;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: #ff0000; /* ライブサンプルで変更可能 */
}

var colorPicker = document.querySelector("input");
colorPicker.addEventListener("change", function (evt) {
  document.querySelector("p").style.webkitTextStrokeColor = evt.target.value;
});

結果

仕様書

Specification
Compatibility # the-webkit-text-stroke-color