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

php中世界最好的语言
Release: 2018-03-22 11:29:48
Original
2544 people have browsed it

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);
}
Copy after login

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;
}
Copy after login

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;
}
Copy after login

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;
}
Copy after login

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;
}
Copy after login

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!

Related labels:
css
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!