コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

CSS スタイルのボーダー画像

高洛峰
リリース： 2017-02-28 13:49:51
オリジナル
1321 人が閲覧しました

border-image-source 属性は境界線の画像のパスを設定します [none | ] 

p {
   border: 20px solid #000;
   border-image-source: url(border.png);
}
ログイン後にコピー

border-image-slice 属性は画像の境界線を内側にオフセットします [ ](1,4) ?fill

border-image-width プロパティは画像の境界線の幅を設定します [ | ; auto] (1,4)

border-image-outset プロパティは、境界線を超える境界線の画像領域の量を設定します [| )

p {
   border: 20px solid #000;
   border-image-source: url(border.png);
   border-image-slice: 27,27,27,27;
}
ログイン後にコピー

border-image-repeat 属性は、画像の境界線を繰り返すか、丸めるか、伸ばすかを設定します (1,2)

p {
   border: 20px solid #000;
   border-image-source: url(border.png);
   border-image-slice: 27,27,27,27;
   border-image-width: 27px 1 10% 27px;
}
ログイン後にコピー

その他の CSS スタイル border-image 関連記事をご覧になる際は、PHP 中国語 Web サイトにご注意ください。

関連ラベル：
css border-image
ソース：php.cn
前の記事：CSS と HTML の使用に関する誤解 次の記事：CSS3のnth-childとnth-of-typeの違い
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ナビゲーションバーの中央のドロップダウンメニュー このCSS/HTMLを作りました。 .navbar{幅:100%;背景色:rgb(151,44,44);オーバーフロー:自動;}.navbara{border-right:1pxs...
から 2024-04-04 18:24:52
0
1
338
divの配置が難しい ページ上の他の要素を基準にして div を配置したいと考えています。これは初期 CSS です: #puzzle{display:inline-block;vertical-alig...
から 2024-04-04 12:14:58
0
1
380
CSSクラスセレクターのwidthプロパティを確認するにはどうすればよいですか?例は .label{} です。 以下は、.label の幅 270 を選択した CSS コードに関する私のコメントです。 ブラウザの開発者ツールを使用して .label 要素を検査すると、実際の幅は 270 ピク...
から 2024-04-01 17:45:11
0
1
338
画像セットを使用して、JavaScript に依存せずにフォールバック背景画像を実装します。 私はフロントエンドと CSS についてはかなり初心者です。背景画像を追加し、サポートされている場合は .avif ファイルをロードしようとしています。それ以外の場合は、.png フ...
から 2024-03-30 11:00:34
0
1
350
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート