From e4b289e4a0e2a8f06d5badeb3a845f585e2819fc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 9 Nov 2021 23:21:41 +0900 Subject: border-image 系のプロパティを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/08 時点の英語版に同期 --- files/ja/web/css/border-image-source/index.md | 106 +++++++++++--------------- 1 file changed, 46 insertions(+), 60 deletions(-) (limited to 'files/ja/web/css/border-image-source') diff --git a/files/ja/web/css/border-image-source/index.md b/files/ja/web/css/border-image-source/index.md index ed546d28c8..a4fb06ac95 100644 --- a/files/ja/web/css/border-image-source/index.md +++ b/files/ja/web/css/border-image-source/index.md @@ -3,27 +3,25 @@ title: border-image-source slug: Web/CSS/border-image-source tags: - CSS - - CSS Borders - - CSS Property - - CSS プロパティ - CSS 背景と境界 - - Reference - - 'recipe:css-property' + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-image-source translation_of: Web/CSS/border-image-source --- -
{{CSSRef}}
- -

border-image-sourceCSS のプロパティで、要素の境界画像に使われる元の画像を設定します。

+{{CSSRef}} -
{{EmbedInteractiveExample("pages/css/border-image-source.html")}}
+**`border-image-source`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の[境界画像](/ja/docs/Web/CSS/border-image)に使われる元の画像を設定します。 - +{{EmbedInteractiveExample("pages/css/border-image-source.html")}} -

元の画像を最終的な境界画像に動的に適用する上で、複数の領域に分割するために {{cssxref("border-image-slice")}} プロパティが使用されます。

+元の画像を最終的な境界画像に動的に適用する上で、複数の領域に分割するために {{cssxref("border-image-slice")}} プロパティが使用されます。 -

構文

+## 構文 -
/* キーワード値 */
+```css
+/* キーワード値 */
 border-image-source: none;
 
 /* <image> 値 */
@@ -33,59 +31,47 @@ border-image-source: linear-gradient(to top, red, yellow);
 /* グローバル値 */
 border-image-source: inherit;
 border-image-source: initial;
+border-image-source: revert;
 border-image-source: unset;
-
+``` -

+### 値 -
-
none
-
境界画像は使用されません。代わりに {{cssxref("border-style")}} で定義されたものが表示されます。
-
{{cssxref("<image>")}}
-
境界に使用する画像への参照です。
-
+- `none` + - : 境界画像は使用されません。代わりに {{cssxref("border-style")}} で定義されたものが表示されます。 +- {{cssxref("<image>")}} + - : 境界に使用する画像への参照です。 -

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

- -

さまさまな値を使った表示例は、 {{cssxref("border-image")}} をご覧ください。

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-image-source', 'border-image-source')}}{{Spec2('CSS3 Backgrounds')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.border-image-source")}}

- -

関連情報

- - +## 例 + +### 基本的な例 + +```css +.box { +  border-image-source: url('image.png'); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("border")}} +- {{cssxref("outline")}} +- {{cssxref("box-shadow")}} +- {{cssxref("background-image")}} +- {{cssxref("url()", "url()")}} 関数 -- cgit v1.2.3-54-g00ecf