CSS3 border-image介绍_html/css_WEB-ITnose

CSS3 の border 属性は大幅に拡張されましたが、その中でも、border-image 属性 (名前のとおり、境界線に絵を追加できます) は、理解するのも使用するのも少し難しいです。この記事ではborder-imageを紹介します。

border-image: url(border.png) 26repeatstretch; などの基本的な構文から始めます。 URL、クリッピング位置、表示方法の 3 つの部分に分かれていることがわかります。

1 つ目は、絶対パスまたは相対パスを使用して境界線画像を読み込むことができます。冗長にならないでください。

2 番目は、TRBL 原則 (右上-下-左) を使用したクリッピング位置です。上の例では、26 は上、右、下、左がすべて 26 ピクセルにクリップされることを意味します。これを 26 52 に設定できます。つまり、上下のトリミングでは 26 ピクセル、左右のトリミングでは 52 ピクセルになります。また、10 15 20 25 に設定することもできます。これは、上 10 ピクセル、右 15 ピクセル、下 20 ピクセル、左 25 ピクセルでトリミングを開始することを意味します。単位が指定されていない場合、デフォルトは px ピクセルです。% に設定することもできます。たとえば、50px * 50px の画像の場合、20% に設定すると、上下左右が 10px ずつトリミングされることになります。

上下左右をトリミングすると、9 マス目の写真になります。 (誰もが 9 正方形のグリッドを知っていますよね? Smartisan の携帯電話インターフェイスは 9 正方形のグリッドです)。百聞は一見に如かず

トリミング前の画像のサイズは 78px * 78px

By border-image: url(border .png) 26 ;カットしたら9マスになりました

9マスのマス目が9つの部分に分かれています(ナンセンスですね。 ..): 右上、中央上、左上、右中央、中央中央、左中央、右下、中央下、左下。クリッピング後は9マスの中心部分、つまり中心部分は表示されず破棄されます。表示できるのは9マスのマス目を囲む円です。四隅（写真の赤いひし形の部分）を枠の四隅にそれぞれ固定します。つまり、右上部分は枠線の右上隅に表示され、同様に左上部分、右下部分、左下部分は枠線の左上隅、右下隅、左下隅に表示されます。それぞれ。残りの4つの部分、中央上、右中、左中、中央下（図の青い菱形の部分）の表示効果は、表示方法と組み合わせる必要があります。

表示方法には、タイルを伸ばす、繰り返す、丸めるなどがあります。デフォルト値はストレッチです。 9マスマス目の中央上と中央下は横表示モード、中央右と中央左は縦表示モードに設定する必要があります。

ストレッチが一番分かりやすいです。しかし、ラウンドタイリングとリピートの違いは何でしょうか? Roundは9マスのマス目部分の元の大きさを変更しますが、repeatは9マスのマス目部分の元の大きさを保ったまま、中心から両側へ無心に繰り返していきます。

例: 横方向のタイル (9 マスの中央の上と中央の下の部分をタイル状に並べる)、縦方向のストレッチ (9 マスのグリッドの中央右と中央左の部分を並べる) ) 百聞は一見に如かずと言われます:

.border-image {    width: 120px;    height: 80px;    border: 26px solid;    border-image: url(border.png) 26 round stretch;}<div class="border-image"></div>

縦方向のストレッチ効果は一目瞭然です。水平方向に丸くタイリングすると、9 マスのグリッド部分の元のサイズが変更されます。この例では、9 マスのグリッドをトリミングすると、1 つの青いひし形が 26 ピクセルになるため、4.6 個の青いひし形が表示されます。 5 つの青いダイヤモンドを表示します。各ダイヤモンドは 24 ピクセルに縮小されます。

次に、レベルを変更して繰り返し、違いを確認してみましょう。百聞は一見に如かずです:

.border-image {    width: 120px;    height: 80px;    border: 26px solid;    border-image: url(border.png) 26 repeat stretch;}<div class="border-image"></div>

繰り返しでは、9 正方形のグリッド パーツの元のサイズ (それぞれの青いひし形は 26 ピクセルのまま) を維持し、中心から両側に向かって繰り返し始め、最終的に 4.6 個の青いひし形を表示します

水平方向と垂直方向の値が同じ場合は、コード border-image:url(border.png) 26round; を繰り返す必要はありません。 border-image: url(border.png) 26 ラウンドround;と同等。表示モードのデフォルト値がストレッチになっているためです。つまり、 border-image: url(border.png) 26; は border-image: url(border.png) 26 ストレッチストレッチ;

と同等になります。使用法を紹介しましたが、何の役に立つのでしょうか?これには想像力を働かせることが必要です。たとえば、美しいページ効果などです。元の PNG 画像:

border-image を使用して画像を div の境界線に追加した後、div の効果:

最後に、Can I Use によると、この属性には IE との互換性の問題があり、IE11 のみがサポートを開始するようです。 (IE に関しては、Microsoft に関しては、私は長い間文句を言うことができませんでした)

他のブラウザの場合、最新バージョンでは、border-image を直接使用しても問題ありません。ただし、古いバージョンにはプレフィックスを付ける必要があります。MDN は通常、

-moz-border-image:url("border.png") 30 30 repeat; /* Old Firefox */ -webkit-border-image:url("border.png") 30 30 repeat; /* Safari */ -o-border-image:url("border.png") 30 30 repeat; /* Opera */ border-image:url("border.png") 30 30 repeat;