diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-03-08 00:44:51 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-03-15 00:16:01 +0900 |
commit | 54e4e3b4d64247fe726921526aec48180c35a466 (patch) | |
tree | 1b253cefa3508e1394b32a5efffb896099388d34 | |
parent | f465736494c77f022062f8c76d1f329888be8824 (diff) | |
download | translated-content-54e4e3b4d64247fe726921526aec48180c35a466.tar.gz translated-content-54e4e3b4d64247fe726921526aec48180c35a466.tar.bz2 translated-content-54e4e3b4d64247fe726921526aec48180c35a466.zip |
2021/08/13 時点の英語版に基づき新規翻訳
-rw-r--r-- | files/ja/web/css/-webkit-text-stroke/index.md | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/files/ja/web/css/-webkit-text-stroke/index.md b/files/ja/web/css/-webkit-text-stroke/index.md new file mode 100644 index 0000000000..1d4d700b96 --- /dev/null +++ b/files/ja/web/css/-webkit-text-stroke/index.md @@ -0,0 +1,94 @@ +--- +title: '-webkit-text-stroke' +slug: Web/CSS/-webkit-text-stroke +tags: + - CSS + - CSS プロパティ + - 標準外 + - リファレンス + - WebKit + - recipe:css-shorthand-property +browser-compat: css.properties.-webkit-text-stroke +translation_of: Web/CSS/-webkit-text-stroke +--- +{{CSSRef}}{{Non-standard_header}} + +**`-webkit-text-stroke`** は [CSS](/ja/docs/Web/CSS) のプロパティで、テキスト文字の輪郭線の[幅](/ja/docs/Web/CSS/length)と[色](/ja/docs/Web/CSS/color_value)を指定します。これは個別指定プロパティ {{cssxref("-webkit-text-stroke-width")}} および {{cssxref("-webkit-text-stroke-color")}} の一括指定プロパティです。 + +```css +/* 幅と色の値 */ +-webkit-text-stroke: 4px navy; +text-stroke: 4px navy; + +/* グローバル値 */ +-webkit-text-stroke: inherit; +-webkit-text-stroke: initial; +-webkit-text-stroke: unset; +text-stroke: inherit; +text-stroke: initial; +text-stroke: unset; +``` + +## 構成要素のプロパティ + +このプロパティは以下の CSS プロパティの一括指定です。 + +- [`-webkit-text-stroke-color`](/ja/docs/Web/CSS/-webkit-text-stroke-color) +- [`-webkit-text-stroke-width`](/ja/docs/Web/CSS/-webkit-text-stroke-width) + +## 構文 + +### 値 + +- {{cssxref("<length>")}} + - : 輪郭線の幅です。 +- {{cssxref("<color>")}} + - : 輪郭線の色です。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### テキストに赤い輪郭線を追加 + +#### HTML + +```html +<p id="example">このテキストの輪郭線は赤です。</p> +``` + +#### CSS + +```css +#example { + font-size: 3em; + margin: 0; + -webkit-text-stroke: 2px red; +} +``` + +#### 結果 + +{{EmbedLiveSample("Adding_a_red_text_stroke", 600, 60)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Surfin' Safari blog post announcing this feature](https://www.webkit.org/blog/85/introducing-text-stroke/) +- [CSS-Tricks article explaining this feature](https://css-tricks.com/adding-stroke-to-web-text/) +- {{cssxref("-webkit-text-stroke-width")}} +- {{cssxref("-webkit-text-stroke-color")}} +- {{cssxref("-webkit-text-fill-color")}} |