Border-image usage in CSS styles

This time for everyone to bring CSS style border-image use in detail, the use of CSS style border-image considerations, the following is the actual case, together to see.

Border-image-source property sets the path of the picture for the border [none | <image>]

p {   border:20px solid #000;   Border-image-source:url (border.png);}

Border-image-slice Property picture Border Inward offset [<number> | <percentage>] (1,4)? fill

p {   border:20px solid #000;   Border-image-source:url (border.png);   border-image-slice:27,27,27,27;}

Border-image-width property sets the width of the picture border [<length>|<number> |<percentage> | auto] (1,4)

p {   border:20px solid #000;   Border-image-source:url (border.png);   border-image-slice:27,27,27,27;   BORDER-IMAGE-WIDTH:27PX 1 10% 27px;}

Border-image-outset property sets the amount of border image area beyond the border [<length>|<number>] (1,4)

p {   border:20px solid #000;   Border-image-source:url (border.png);   border-image-slice:27,27,27,27;   BORDER-IMAGE-WIDTH:27PX 1 10% 27px;   border-image-outset:27px 27px 27px 27px;}

Border-image-repeat property sets whether the image border should be tiled (repeated), covered (rounded), or stretched (stretched)

p {   border:20px solid #000;   Border-image-source:url (border.png);   border-image-slice:27,27,27,27;   BORDER-IMAGE-WIDTH:27PX 1 10% 27px;   border-image-outset:27px 27px 27px 27px;   border-image-repeat:rounded;   Border-image:url (border.png)  rounded;}

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Baidu Post-3D flop effect

CSS3 to achieve animated bike effects

CSS3 two ways to implement a progress bar