Background that automatically scales with content using CSS3 duration

CSS3 brings us a very practical new attribute: border-image. Using this attribute, we can make a background that automatically scales as the content increases or decreases. Without further ado, let’s look at the code!
HTML:
<ol> <li>First list content</li> <li>Second list content</li> <li>Third item List content</li> <li>Fourth list content</li> <li>Fifth list content</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;
Rendering:

Now we add list entries and take a look at the rendering:

As the number of lists increases, the background automatically becomes larger, which is very good!
This is border.png:

## You may have questions about the 30 30 in border-image:

-webkit-border-image : url(border.png) 30 30 round;Look at the picture below:

My personal understanding of the two values ​​​​in the border-image above is, The first one indicates how many pixels the top and bottom of the picture "eat" from the edge as the border. Correspondingly, the second value indicates the left and right. The remaining middle area will be repeated (or stretched) as the background.

You may still have a question, the size of the stroke:
border: 20px solid;Let’s take a look at what it looks like when the stroke is 50 pixels:

So now you understand.

As for the color of the stroke, it won’t be displayed, so it doesn’t matter whether you write it or not.
Okay, now you know how to make this kind of background that automatically scales with the content, you can practice it!

The above is the detailed content of Background that automatically scales with content using CSS3 duration. For more information, please follow other related articles on the PHP Chinese website!