About the use of border-image properties in CSS3

This article mainly introduces the use of Border-image in the detailed CSS3, is the basic knowledge of CSS3 learning, the need for friends can refer to the following

Recently in the project to use the Border-image, has been only known for its name, do not know its use.

The end result is this: And as the border width changes. The gray part with the twill is border

First look at the CSS:

border-width:40px;   Border-style:solid;   Border-image-source:url (' http://das.alipay.net/shulaibao/img/repeat_padding_bg_400px.png ');   border-image-slice:40;   Border-image-repeat:repeat;   Background: #fff;   width:800px;

First it must be used together with border, if border is none, it is also invalid
The actual replacement is Border-style, and when Border-image-source or border-image is invalid, the Border-style will be effective.

Like background, Border-image also has a shorthand notation.

Syntax for shorthand:

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

As shown above, there are 5 attributes, which are decomposed in detail as follows:

Image address: Border-image-source, well understood, either there or not

Border-image-source:url (") | | None

Picture slices: border-image-slice, not very good understanding, is to achieve the essence of the effect, it cut border-image-source into 9 parts, commonly known as nine Gongge, 4 corners, 4 borders, 1 intermediate areas

Grammar:

[<number> | <percentage>] {1,4} && fill?

Border-image-slice:slice/* one-value syntax */e.g. border-image-slice:30%;
Border-image-slice:horizontal Vertical/* two-value syntax */e.g. border-image-slice:10% 30%;
Border-image-slice:top Vertical Bottom/* three-value syntax * e.g. BORDER-IMAGE-SLICE:30 30% 45;
Border-image-slice:top Right Bottom Left/* four-value syntax */e.g. Border-image-slice:7 12 14 5;
Border-image-slice: ... fill/* The fill value can placed between any value */e.g. border-image-slice:10% fill 7 12;
Border-image-slice:inherit
Values can only be write values, percentages (relative to the width or height of the picture), and length (PX,EM, etc.) are not allowed and are not valid

Picture width: border-image-width Instead of border width
Picture protrusion: Border-image-outset
Picture repetition: border-image-repeat, whether the background is repeating, the default value is stretch (stretched)

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!