このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

border-image-source:境界線として使用する画像CSS3で追加

記事Apr. 23rd,2021
境界線として使用する画像を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 border-image-source: none;
適用対象 すべての要素(ただし、border-collapse: collapse;であるテーブル内部要素を除く)
継承 しない
パーセント値 パーセント値は指定できません
計算値 none”、もしくは<image>”値の算出された値
アニメーション 離散

border-image-source”プロパティは境界線として使用するための画像を指定するプロパティです。

border-image-source”プロパティで指定された画像はborder-image-slice”プロパティで指定された方法で分割され、境界線の角や辺として使用されます。

border-image-source”プロパティによって指定された画像はborder-style”プロパティによって指定された境界線の代わりに表示されます。

サンプルコード

div { border-image-source: url(border-image_sample.png);}

説明
none 境界線に画像を使用しない (border-style”プロパティによって指定された境界線が描画されます。)
<image> url()”関数を使用した画像ファイルやlinear-gradient()”関数で生成したグラデーションなどで境界線用の画像を指定
共通キーワード

仕様書

Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
border-image-source
定義なし

定義なし

定義あり
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
none
定義なし

定義なし

定義あり
<image>
定義なし

定義なし

定義あり

使用例

境界線用の画像を指定する

div {
border-style: solid;
border-width: 20px;
border-image-slice: 200 fill;
border-image-source: url(border-image_sample.png);
}
div {
border-style: solid;
border-width: 20px;
border-image-slice: 1;
border-image-source: linear-gradient(rgb(66,174,147), rgb(28,20,15));
}

境界線に画像を使用しない

div {
border-style: solid;
border-width: 20px;
border-image-source: none;
}
border-image-source: none;
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク