CSS3 の border-image 属性の詳細な紹介

border-image 属性を使用する本来の目的は、複雑な作業を簡素化することであることはわかっていますが、この属性を習得すると、コーディング時間と効率が大幅に節約されることがわかります。次にborder-imageの使い方を説明します。

要素の境界線が不規則な場合の状況。このとき、ボーダーの背景としてデザイン描画を使用する必要があります。background-imageと比較して、border-image は、コードを使用してボーダーの背景の伸縮や繰り返しを制御できるという利点があります。

の効果は、ボタンの幅と高さが不確かな場合です。 border-image を使用してボタンを作成する 同じ背景画像を使用して、さまざまな幅と高さのボタンを作成できます。

ボーダー画像属性分析

ボーダー背景画像。形式は url("...") です。

border-image-slice

画像の境界線が内側にオフセットされる距離。形式: border-image-slice: 右上下左。背景画像を上下左右から切り取った4本の線の間の距離をそれぞれ指します。

距離には数値とパーセンテージを使用できます。デフォルト値の単位は px ですが、値の後に px を追加することはできません。そうしないと、この CSS はブラウザーによって解析されません。 使用法は margin や padding と同様です。ここでは例として数値を使用しますが、パーセンテージについても同様です。

border-image-slice: 10; /*距離は上から下と左右で10pxです;*/

border-image-slice: 10 30; /*距離は上から下まで10pxで30pxです左右に;*/

border-image-slice : 10 30 20; /*距離は上から10px、下から20px、左から30pxです;*/

border-image-slice : 10 30 20 40; /*距離は上から10px、右から30px、下から20px、左から40px;*/

背景画像を4つの部分に分割します。値またはパーセンテージの設定に加えて、「塗りつぶし」を追加すると、領域 1、2、3、4、6、7、8、9 が画像の境界線としてカットされます。

border-image-slice: 25 11 fill;

注: スライス カットの左右の距離が次の場合、スライスは負の値を受け入れません。背景画像の幅より大きい場合、上下の境界線は表示されません。スライスの上下の距離の合計が背景画像の高さより大きい場合、左右の境界線は表示されません。

border-image-width

画像の境界線の幅。入力できるのは数値のみであり、単位を追加することはできません。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

H5 を使用して花火のパーティクルエフェクトを作成する方法

HTML Web ページの最適化と圧縮を実装する手順

Web ページで h タグを使用した開発経験

以上がCSS3 の border-image 属性の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。