About the use of CSS3 picture border Border-image

In the CSS3 introduced many new features, this article mainly introduced the CSS3 picture border border-image usage, has certain reference value, has the interest can understand

For CSS property border, I believe that all Web developers are very familiar with it. We can make HTML elements show different borders by setting the width, color, and style of the HTML element's border, such as a double line, a dashed line, and a dot. But no matter how you set it up, these are some very primitive practices. From CSS3 onwards, we have a new attribute: Border-image, which allows you to use beautiful small images around HTML elements, in the form of picture borders. With the Border-image property, we can make a very nice border style.

Many of the new features introduced in CSS3, such as the new input type in HTML5, the Chinese font (web font), placeholder and so on, are very practical and popular, and we've also given a very beautiful example of border-image, But the use of picture border on the network border-image is still very few, I think mainly because Google browser and Firefox browser support them very early, and IE11 only support this syntax.

Syntax for picture border Border-image

< ' Border-image-source ' > | | < ' border-image-slice ' > [/< ' border-image-width ' > |/< ' border-image-width ';?/< ' Border-image-outset ' >]? | | < ' border-image-repeat ' >

These syntax descriptions look very boring, everyone likes to see examples, so the easiest to understand, below we will be a few examples.

Picture border Border-image Usage One: Border chart looping tiling (repeat)

In this case, the border chart picture will be tiled to fill the bounding area.

<p id= "Repeat" > pictures will be looped over the border area </p>

#repeat {   border:15px solid transparent;  padding:10px 20px;  -moz-border-image:url ("/files/4127/border.png") repeat; /* Old Firefox *  /-webkit-border-image:url ("/files/4127/border.png") repeat;/* Safari */  -o-border-image : URL ("/files/4127/border.png")-repeat; /* Opera *  /Border-image:url ("/files/4127/border.png") repeat;}

Example Demo 1:

Picture border Border-image Usage Two: Border graph adaptive loop tiling (round)

As you may see, the picture border above is beautiful, but there is a flaw, that is, when the width or height of the element is not an integer multiple of the bounding chart, the last/first picture cannot be displayed, it will be obscured part of it, so it looks very unattractive. CSS3 's designers have already taken this into account, and using the round attribute value can avoid this situation. The role of round is to make a slight adjustment to the frame chart, to ensure that each picture can be displayed, adding to the ornamental.

<p id= "Round" > picture will be covered with border area </p>

#round {   border:15px solid transparent;  padding:10px 20px;  -moz-border-image:url ("/files/4127/border.png") round; /* Old Firefox *  /-webkit-border-image:url ("/files/4127/border.png") round;/* Safari */  -o-border-image: URL ("/files/4127/border.png")-round; /* Opera *  /Border-image:url ("/files/4127/border.png") round;}

Example Demo 2

Picture border Border-image Usage Three: Border chart damper shop (stretch)

' Stretch ' is stretching, drawing the small picture to fill the bounding area, not looping, obviously, so the border graph will deform.

<p id= "Stretch" > picture will stretch the full border area .</p>

#stretch {   border:15px solid transparent;  padding:10px 20px;  -moz-border-image:url ("/files/4127/border.png") stretch; /* Old Firefox *  /-webkit-border-image:url ("/files/4127/border.png") stretch;/* Safari *  /- O-border-image:url ("/files/4127/border.png") stretch; /* Opera *  /Border-image:url ("/files/4127/border.png") stretch;}

Example Demo 3

Obviously, the border-image first usage should be less common, because sometimes it causes the border to feel incomplete. And the second and the third usage are different, it is the beauty of each. The border chart used here is actually very simple. Exquisite art can make a more beautiful frame chart, can show the effect of the praise, such as the previous article in an example, the following again to show you to see.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!