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

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

现在我们增加列表条目，看看效果图：

随着列表数目的增加，背景自动变大了，很好！
这是border.png：

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

上面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 ラウンド;

レンダリング:

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

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

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