Community Learn Tools Library Leisure
search
English
Home > Web Front-end > CSS Tutorial > Detailed introduction to the sample code of border-image in css style

Detailed introduction to the sample code of border-image in css style

黄舟
Release： 2017-06-01 10:39:26
Original
1851 people have browsed it

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



border-image-outset Property setting border image The amount of 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- The 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;
}
Copy after login

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

Related labels：
css，border，image
source：php.cn
Previous article：CSS Centering: The Most Comprehensive Collection of CSS Centering Methods Next article：Detailed explanation of the difference between nth-child and nth-of-type in CSS3
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
Latest Articles by Author
Latest Issues
Center dropdown menu in navigation bar I made this CSS/HTML. .navbar{width:100%;background-color:rgb(151,44,44);overflow:auto;}.n...
From 2024-04-04 18:24:52
0
1
338
Difficulty positioning divs I want to position a div relative to other elements on the page. This is the initial CSS: ...
From 2024-04-04 12:14:58
0
1
380
How to check width property of CSS class selector? An example is .label{} Here is my comment on the css code, where I chose a width of 270 for the .label: If you in...
From 2024-04-01 17:45:11
0
1
338
Use image sets to implement fallback background images without relying on javascript I'm fairly new to front-end and CSS. I'm trying to add a background-image and load .avif f...
From 2024-03-30 11:00:34
0
1
350
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template