Apply an image to the border
As the name implies, it is to apply a background image to the border, which is similar to the background property we commonly use.
E.g:
background:url(xx.jpg) 10px 20px no-repeat;
But it is a little more complicated than the background image.
For example, use the image below as a border image
According to the syntax of barder-image:
#border-image{
background:#F4FFFA;
width:210px; height:210px; border:70px solid #ddd;
border-image:url(borderimg.png) 70 repeat
}
Note: solid set solid line dootted dotted line dashed dotted line double double line
The effect diagram is as follows:
repeat is to repeat all the time, the excess part is cut off, and it is centered to start repeating
The Round parameter can be understood as a complete coverage, and in order to achieve completeness, it will stretch or compress
E.g:
#border-image {
width:170px;
height:170px;
border:70px solid;
border-image:url(borderimg.png) 70 round;
}
Effect picture:
stretch is stretching, how long it is
border-image:url(borderimg.png) 70 stretch
Effect picture:
