Detailed explanation of the use of border-image in css style

This time I will bring you a detailed explanation of the use of border-image in the css style. What are the precautions when using the border-image in the css style. The following is a practical case. Let’s take a look.

border-image-source PropertiesSet the path of the image of the border [none | ]

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

border-image-slice Property image border offset inward [ | ](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 [| | | 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;
}

The border-image-outset property sets the amount of the border image area beyond the border [| ](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 setting Whether the image border should be repeated, rounded or stretched (1,2)

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) 27  rounded;
}

I believe you have mastered the method after reading the case in this article, and there will be more exciting Please pay attention to other related articles on php Chinese website!

Recommended reading:

3D flop effect of Baidu Tieba

css3 to achieve animated bicycle effect

Two ways to implement progress bars in CSS3

The above is the detailed content of Detailed explanation of the use of border-image in css style. For more information, please follow other related articles on the PHP Chinese website!