CSS3 border-image プロパティを使用すると、要素の周囲に画像の境界線を設定できます。
1. ボーダー画像とは
カラフルな境界線効果を実現するために、css3 では新しい border-image 属性が追加され、要素の境界線として画像を指定できるようになります。
ボーダー画像の利用シーン
ボックスのサイズは異なりますが、境界線のスタイルは同じです。この時点では、背景画像ではなく、境界線画像を完成させるために必要です。
2. ブラウザのサポート
表内の数字は、プロパティを完全にサポートする最初のブラウザのバージョンを示します。
番号の後の -webkit- または -moz- を使用する場合は、プレフィックスを指定する必要があります。
3. CSS3 border-image プロパティ
CSS3 border-image プロパティを使用すると、要素の周囲の通常の境界線の代わりに使用する画像を指定できます。プロパティには 3 つの部分があります。
-
境界線として使用する画像。
-
画像を分割する場所。
-
中間セクションを繰り返すか延長するかを決定します。
次の画像 (「border.png」という名前) を例として取り上げます。
原理分析:
border-image プロパティは、三目並べボードのように、画像を 9 つの部分に分割します。次に、コーナーがコーナーに配置され、中央のセクションが指定された順序で繰り返されるか引き伸ばされます。
知らせ：
border-image が適切に機能するには、要素にも border プロパティが設定されている必要があります。
ボーダー画像のカット原理
最も重要なのは四隅の切り取りです。きれいな形状を使用して四隅を切り取ります。四隅の完全性を維持する必要があります。順番は、右上、下、左の順です。
境界線画像の文法仕様
border-image-source: 境界線で使用される画像のパス (どの画像ですか?);
border-image-slice: 画像の境界線は内側にオフセットされます (トリミングされたサイズで上、右、下、左の順序で単位が追加されてはなりません)。
border-image-width: 画像の境界線の幅 (ここで追加する必要がある単位は境界線の幅ではなく、境界線画像の幅です)、このデフォルト属性は境界線の幅ですが、違いは、これは境界線イメージの幅であり、テキストが圧迫されることはありません。
border-image-repeat: 画像の境界線を並べて表示する (繰り返し)、カバーする (丸める)、または引き伸ばす (ストレッチ) かどうか。デフォルトは引き伸ばされます。
注: border-image プロパティは、border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat の短縮形です。
組み合わせた書き込み:
border-image: url("images/border.jpg") 167/20 ピクセル ラウンド;
分割書き込み:
border-image-source: url("images/border.jpg");
境界画像スライス: 167 167 167 167;
ボーダー画像の幅: 20px;
ボーダーイメージリピート: ラウンド;
説明：
-
枠線画像リソースアドレス
-
トリミング サイズ (上、右、下、左) の単位はデフォルトで px ですが、100% を使用できます。
-
境界線イメージの幅、境界線のデフォルトの幅。
-
タイリング方法:
-
ストレッチ ストレッチ (デフォルト)
-
タイリングを繰り返し、境界線の中心から両側にタイリングすると、不完全な絵ができます。
-
丸 周囲は切り絵でタイル貼り完了。
-
デモコード:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框图片</title>
<style>
ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
width: 350px;
height: 160px;
border: 20px solid #ccc;
margin-top: 20px;
}
li:nth-child(1){
/*border-image: url("images/border.jpg") 167/20px round;*/
border-image-source: url("images/border.jpg");
border-image-slice: 167 167 167 167;
border-image-width: 20px;
/*环绕 是完整的使用切割后的图片进行平铺*/
border-image-repeat: round;
}
li:nth-child(2){
/*平铺 从边框的中心向两侧开始平铺 会出现不完整的图片*/
border-image: url("images/border.jpg") 167/20px repeat;
}
li:nth-child(3){
/*默认的平铺方式*/
border-image: url("images/border.jpg") 167/20px stretch;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>