Using the CSS3 border-image property, you can set an image border around an element.
1. What is a border image
In order to achieve colorful border effects, in css3, a new border-image attribute is added, which allows specifying an image as the border of an element.
Usage scenarios of border images
The size of the box is different, but the border style is the same. At this time, a border image is needed to complete it, not a background image, but a border image.
2. Browser support
A number in the table specifies the first browser version to fully support the property.
-webkit- or -moz- after the number need to specify the prefix when used.
3. CSS3 border-image properties
The CSS3 border-image property allows you to specify an image to be used in place of the normal border around an element. Properties have three parts:
-
An image to use as a border.
-
Where to split the image.
-
Determine if the middle section should be repeated or extended.
Take the following image (called "border.png") as an example:
Principle analysis:
The border-image property splits the image into nine parts, like a tic-tac-toe board. The corners are then placed at the corners and the middle section is repeated or stretched in the order specified.
Notice:
For border-image to work properly, the element needs to have a border property set too!
Cutting Principle of Border Image
The most important thing is to cut out the four corners. Use the well-shaped shape to cut out the four corners. The integrity of the four corners must be preserved. The order is: top right bottom left;
Grammatical Specifications for Border Images
border-image-source: the path of the image used in the border (which image?);
border-image-slice: The image border is offset inward (the cropped size must not add units, the order of top, right, bottom, and left);
border-image-width: the width of the image border (the unit needs to be added here is not the width of the border but the width of the border image), this default attribute is the width of the border, but there is a difference, this is the width of the border image and will not squeeze the text ;
border-image-repeat: Whether the image border should be tiled (repeat), covered (round) or stretched (stretch). The default is stretched.
Note: The border-image property is short for border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat.
Combined writing:
border-image: url("images/border.jpg") 167/20px round;
Split writing:
border-image-source: url("images/border.jpg");
border-image-slice: 167 167 167 167;
border-image-width: 20px;
border-image-repeat: round;
explain:
-
Border image resource address
-
The cropping size (top, right, bottom, left) unit defaults to px, and you can use 100%.
-
The width of the border image, the default width of the border.
-
Tiling method:
-
stretch Stretch (default)
-
Repeat tiling, tiling from the center of the border to both sides, there will be incomplete pictures.
-
round Surrounding is complete tiling with cut pictures.
-
DEMO code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框图片</title>
<style>
ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
width: 350px;
height: 160px;
border: 20px solid #ccc;
margin-top: 20px;
}
li:nth-child(1){
/*border-image: url("images/border.jpg") 167/20px round;*/
border-image-source: url("images/border.jpg");
border-image-slice: 167 167 167 167;
border-image-width: 20px;
/*环绕 是完整的使用切割后的图片进行平铺*/
border-image-repeat: round;
}
li:nth-child(2){
/*平铺 从边框的中心向两侧开始平铺 会出现不完整的图片*/
border-image: url("images/border.jpg") 167/20px repeat;
}
li:nth-child(3){
/*默认的平铺方式*/
border-image: url("images/border.jpg") 167/20px stretch;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>