2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

[CSS] border-imageプロパティでボーダー画像をまとめて指定しよう!

border-imageの評価
頻出度
(1.0)
重要度
(1.0)
総合評価
(1.0)




1.border-imageとは?

border-imageプロパティはボーダー画像に利用する画像とその幅、分割位置などをまとめて指定することができます。

値の指定方法は以下の通りです。

{ border-image: -source -slice -width -outset -repeat; }

値の指定方法

それぞれの値は半角スペースで区切って指定できます。

他の一括指定プロパティと同様、省略された値には初期値が設定されます。




2.border-imageの使い方

それではborder-imageの使い方をみていきましょう。

.border-sample {
 width: 300px; 
 border: 45px solid;
 border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60;
 padding: 30px;
}

他にも値を設定できるのでいろいろと試してみることをお勧めします!




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です