Background with content auto-scaling with CSS3 time limit

CSS3 brings us a very useful new property: Border-image, we can make use of this property to create a background that automatically scales as content increases or decreases. Nonsense not much to say, look at the code!
Html:
<ol> <li>第一条列表内容</li> <li>第二条列表内容</li> <li>第三条列表内容</li> <li>第四条列表内容</li> <li>第五条列表内容</li> </ol>
Css:
border: 20px solid; width: 200px; -webkit-border-image: url(border.png) 30 30 round;
：

Now let's add the list entry to see:

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

You may have questions about 30 30 in Border-image:
-webkit-border-image: url(border.png) 30 30 round;
See:

Above the border-image in the two values, the personal understanding is that the first to show the picture up and down from the edge of the "eat" into how many pixels as a border, corresponding to the second value represents about. The rest of the middle area will be repeated (or stretched) as the background.
You may also have a question about the size of the stroke:border: 20px solid;
Let's see what the stroke looks like when it's 50 pixels:

So now you get it.
As for the color of the stroke, because it will not be displayed, so it doesn't matter whether it is written or not.
Well, now that you know how to make this with content auto-scaling background, you can go to practice!