The Border-image attribute in CSS3 is described in detail

We know that the purpose of this border-image attribute is to simplify the complex work, and when you are familiar with this attribute you will find that you have greatly saved the time and efficiency of coding. Next, we'll teach you how to use Border-image.

An irregular case of an element border. At this point, you need to use a design chart as the border background, border-image and background-image, compared to the advantages of more flexibility, you can use the code to control the border background stretching and repetition, thus creating a more diverse effect

The condition of the button width and height is uncertain. Using the Border-image to make the button, you can use the same background map to create a variety of wide-height buttons.

Border-image attribute Analysis

Border background picture. The format is: URL ("...").

Border-image-slice

The distance the picture border is offset inward. Format: Border-image-slice:top right bottom left. The distance from the lower right and bottom left of the four lines of the cut background image, respectively.

The distance accepts a number, a percentage. The default value is PX, but you cannot add PX after the value, otherwise the CSS will not be parsed by the browser. The usage is similar to margin,padding. Here is a numerical example, the same percentage.

Border-image-slice:10; /* distance up or down is 10px;*/

Border-image-slice:10 30; /* distance up and down 10px, left and right 30px;*/

Border-image-slice:10 30 20; /* Distance on 10px, under 20px, left and right 30px;*/

Border-image-slice:10 30 20 40; /* Distance 10px, right 30px, next 20px, left 40px;*/

Four lines divide the background graph into 9 parts, where the 1,2,3,4,6,7,8,9 eight areas will be cut, as the picture border, if in addition to set a value or a percentage, plus a "fill", then the area 5 will be filled with the elements as background content, such as:

Border-image-slice:25 fill;

Note: Slice does not accept negative values, and if the left and right distance of the slice cut is greater than the width of the background graph, the upper and lower borders do not appear. If the top and bottom distance of the slice cut is greater than the height of the background graph, the left and right borders are not displayed.

Border-image-width

The width of the picture border. Only values are accepted and no units can be added.

Believe that you have seen these cases you have mastered the method, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

Making method of making fireworks particle special effects with H5

HTML Web page optimization compression implementation steps

Development experience of using H tags in web pages