CSS3 チュートリアル-border-image プロパティ

今日は、Cui'er 姉妹が CSS3 チュートリアル、つまり境界線の最後の属性である border-image 属性について説明します。この記事では主にこの属性の定義と使用法を紹介し、フロントエンド開発作業で助けを必要とする学生に役立つことを願っています。

具体的な例を見てみましょう:

div 要素を囲む境界線として画像を指定します:

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

ブラウザのサポート:

Internet Explorer 11、Firefox、Opera 15、Chrome、Safari 6 は、border-image をサポートします。属性。

Safari 5 は、代替の -webkit-border-image 属性をサポートしています。

定義と使用法:

border-image プロパティは、次のプロパティを設定するために使用される短縮プロパティです。 border -image-outset;

border-image-repeat;

値を省略した場合はデフォルト値が設定されます。

ヒント: 美しいスケーラブルなボタンを構築するには、border-image-* プロパティを使用します。

可能な値:

上記は CSS3 のtutorial-border-image 属性の内容です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。