ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS3 の継続時間を使用してコンテンツに合わせて自動的に拡大縮小する背景

CSS3 の継続時間を使用してコンテンツに合わせて自動的に拡大縮小する背景

高洛峰
リリース: 2017-03-17 09:57:19
オリジナル
1633 人が閲覧しました

CSS3 には、border-image という非常に実用的な新しい属性が導入されており、この属性を使用すると、コンテンツの増加または減少に応じて自動的に拡大縮小する背景を作成できます。早速、コードを見てみましょう。
HTML:
<li>最初のリストの内容</li><li> <code><ol>     <li>第一条列表内容</li>     <li>第二条列表内容</li>     <li>第三条列表内容</li>     <li>第四条列表内容</li>     <li>第五条列表内容</li> </ol>
CSS:
border: 20px solid; <a href="//m.sbmmt.com/wiki/835.html" target="_blank">width</a>: 200px; -webkit-border-image: url(border.png) 30 30 round;
效果图:

使用CSS3时限随内容自动伸缩的背景

现在我们增加列表条目,看看效果图:

使用CSS3时限随内容自动伸缩的背景

随着列表数目的增加,背景自动变大了,很好!
这是border.png:

使用CSS3时限随内容自动伸缩的背景

你可能会对border-image中的30 30有疑问:
-webkit-border-image: url(border.png) 30 30 round;
看下图:

使用CSS3时限随内容自动伸缩的背景

上面border-image中的两个数值,个人理解是,第一个表示图片的上下从边缘开始“吃”进多少像素作为边框,对应的,第二个数值表示左右。剩下的中间区域就会被重复(或者拉伸)作为背景。
你可能还有一个疑问,描边的大小:border: 20px solid;CSS:
border: <a href="http://www.%20php.cn/wiki/835.html" target="_blank">幅</a>: 200px; -webkit-border-image: url(border.png) 30 30 ラウンド;

レンダリング:

使用CSS3时限随内容自动伸缩的背景 CSS3 の時間制限を使用するコンテンツに合わせて背景を自動的に拡大縮小するには

リストの数が増えると、背景も自動的に大きくなり、これは素晴らしいことです。
これは border.png です:

CSS3 の時間制限を使用してコンテンツに合わせて自動的にスケールする背景

border-image の 30 30 について質問があるかもしれません: 🎜-webkit -border-image: url(border.png) 30 30 ラウンド;🎜下の図を見てください:🎜🎜CSS3 の時間制限を使用してコンテンツに合わせて自動的にスケールする背景🎜 🎜上部の境界線 - 画像内の 2 つの値についての私の個人的な理解は、最初の値は、画像の上部と下部が境界線としてエッジから「食べる」ピクセル数を示し、対応して 2 番目の値が示すということです。左と右。残りの中央領域は背景として繰り返されます (または引き伸ばされます)。 🎜ストロークのサイズについてまだ疑問があるかもしれません: border: 20px Solid;🎜 ストロークが 50 ピクセルの場合にどのように見えるかを見てみましょう: 🎜🎜🎜🎜🎜それでは、分かるでしょう。 🎜ストロークの色については表示されないので、書いても書かなくても大丈夫です。 🎜さて、コンテンツに合わせて自動的に拡大縮小するこの種の背景を作成する方法がわかったので、練習してみましょう! 🎜🎜🎜

以上がCSS3 の継続時間を使用してコンテンツに合わせて自動的に拡大縮小する背景の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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