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 attribute image border offset inward [
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 [
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 The property sets the amount of the border image area beyond the border [
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 attribute sets 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;
}The above is the detailed content of Detailed explanation of how to use border-image in css. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
