Home >Web Front-end >CSS Tutorial >Detailed explanation of the use of border-image in css style

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

php中世界最好的语言
php中世界最好的语言Original
2018-03-22 11:29:482594browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn