border-image use

Composite property border-image 

Set css styles:

border-image-source:url(../img/border_img.png);

border-image-slice:0 0 100% 0;

border-image-width:0.05rem;

border-image-outset

border-image-repeat:repeat;

These attributes are combined together can be written as:  

border-image:url(../img/border_img.png) 0 0 100%/0.05rem 0 repeat;

Pictures unilateral border

For this single border at the top, can be modified only 

border-image-slice:100% 0 0 0;

Used in ios

border:solid 1px transparent;

border-image:url(…) 30 30 round;

But found that even as above set the border is not valid in the ios, the reason is that we want to open the border to write complex attributes, such as:

border-width:1px;

border-style:solid;

border-image:url(…) 30 30 round;

That's all with the

Use renderings

note

1, while using the border-image border must be used, for example:

border:solid 1px transparent;

border-image:url(…) 30 30 round;

2, border-image-slice percentage units with respect to the picture frame size, image width affect the horizontal offset, vertical offset image high impact

 

 

Guess you like

Origin www.cnblogs.com/kunmomo/p/12622686.html