ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS3 チュートリアル-border-image プロパティ

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

黄舟
リリース: 2016-12-27 16:04:56
オリジナル
1711 人が閲覧しました

今日は、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;
}
ログイン後にコピー

ブラウザのサポート:

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

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 サイト (m.sbmmt.com) に注目してください。 CSS3 チュートリアル-border-image プロパティ

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート