Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use the border-image attribute in Css3. It is very detailed and has a certain reference value. Friends who are interested must finish it!

Border-image complicates simple work. After learning this attribute, it is found that the use of this attribute can greatly save coding time and efficiency. To sum up, it is generally applicable to the following two scenarios:

The irregular border of an element. At this time, it is necessary to use the design drawing as the frame background. Compared with background-image, border-image has the advantage of being more flexible and can use code to control the stretching and repetition of the frame background, so it can create more diverse effects.

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

Border-image attribute analysis

Border background picture. Format: url ("…") .

Border-image-slice

The distance by which the picture frame is offset inward. Format: border-image-slice:top right bottom left. It refers to the distance between the upper right and the lower left of the four lines of the cut background picture.

The distance accepts a value, as a percentage. The default value is in 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 an example of numerical value, and the percentage is the same.

Border-image-slice: 10; / * the distance is 10px from top to bottom.

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

Border-image-slice: 10 30 20; / * distance upper 10px, lower 20px, left and right 30px

Border-image-slice: 10 30 20 40; / * distance upper 10px, right 30px, lower 20px, left 40px

The background image is divided into nine parts by four lines. Among them, the eight regions of 1, fill, 3, 4, 6, 7, 8 and 9 will be cut. As a frame of the picture, if you add a "fill" in addition to setting a value or percentage, then region 5 will be filled into the element content as the background, such as:

Border-image-slice: 25 11 fill

Note: slice does not accept negative values; if the sum of the left and right distances cut by slice is greater than the width of the background image, the upper and lower borders are not displayed. If the sum of the upper and lower distances of the slice cut is greater than the height of the background image, the left and right borders are not displayed.

Border-image-width

The width of the picture border. Only numerical values are accepted, and units cannot be added.

The above is all the content of the article "how to use the border-image attribute in Css3". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.