For the borders of elements, in addition to using some of the default styles introduced in the “CSS Borders” section, we can also use images as the borders of elements through the border-image property in CSS3 to create colorful border effects.
The border-image attribute can divide an image into 9 separate parts through some simple rules, and the browser will automatically use the corresponding parts to replace the default style of the border. The border-image attribute is the abbreviation of the five border-image-* attributes, and its syntax is as follows:
border-image: border-image-source || border-image-slice [ / border-image-width | / border-image-width ? / border-image-outset ]? || border-image-repeat
It can be seen from the syntax that border-image is the abbreviation of border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat properties, where:
- border-image-source: defines the path of the border image;
- border-image-slice: Define where the border image starts to be divided;
- border-image-width: defines the thickness (width) of the border image;
- border-image-outset: Define the extension size of the border image (the amount by which the border image area exceeds the border);
- border-image-repeat: Define the tiling method of the border image.
Next, we use the picture shown below to demonstrate the use of border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat.
Figure: Border picture
1. border-image-source
The border-image-source attribute is used to define the image to be used for the border. Through this attribute, you can specify an image to replace the default style of the border. When the value of the border-image-source attribute is none or the specified image is unavailable, it will be displayed. The default style of the border.
In addition, in addition to using the border-image-source attribute to replace the default style of the border with an image, you can also use gradients to define the border style. The syntax format of the attribute is as follows:
border-image-source:none |
Among them, none is the default value of the border-image-source attribute, which means that the image is not used to replace the default style of the border; it is the image path specified using the url() function or the gradient color defined using the linear-gradient() function, used to Replaces the default border style.
[Example] Use the border-image-source property to replace the default border style with an image:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
border: 27px solid;
padding: 10px;
border-image-source: url(./border.png);
}
</style>
</head>
<body>
<div>Replace the default border with an image</div>
</body>
</html>
The running results are shown in the figure below:
Figure: border-image-source property demonstration
It can be seen from the running results that just using the border-image-source attribute cannot achieve the effect we want. Let’s take a look at several other functions.
2. border-image-slice
The border-image-slice attribute is used to split images loaded through the border-image-source attribute. The syntax format of the attribute is as follows:
border-image-slice：[ | ]{1,4} & amp; & amp; fill?
The border-image-slice property can receive three types of values:
- : Numerical value. Specify the position of image segmentation with a specific numerical value. The numerical value represents the pixel position or vector coordinate of the image. Negative values are not allowed;
- : Percentage, relative to the image size, the width of the image affects the horizontal direction, and the height affects the vertical direction;
- fill: Keep the middle part of the border image.
The border-image-slice attribute can specify the four directions of top, bottom, left, and right to split the image, and divide the image into 9 parts including 4 corners, 4 sides, and the middle area. The middle area is always transparent (i.e. No image filling), unless the keyword fill is added, as shown below:
In addition to the fill keyword, the border-image-slice attribute can accept 1~4 parameter values:
- If all four parameter values are provided, the image will be segmented in the order of top, right, bottom, and left;
- If three parameters are provided, the first parameter is used for the top, the second parameter is used for the left and right sides, and the third parameter is used for the bottom;
- If two parameters are provided, the first parameter is used for top and bottom, and the second parameter is used for left and right;
- If only one parameter is provided, top, right, bottom, and left will be divided using this value.
Example] Use the border-image-slice property to split an image loaded via the border-image-source property:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
border: 27px solid;
padding: 10px;
border-image-source: url(./border.png);
border-image-slice: 27;
}
</style>
</head>
<body>
<div>Replace the default border with an image</div>
</body>
</html>
The running results are shown in the figure below:
Figure: border-image-slice property demonstration
3. border-image-width
The border-image-width property is used to set the thickness (width) of the image loaded through the border-image-source property. The syntax format of the property is as follows:
border-image-width: [ | | | auto ]{1,4}
The syntax is explained as follows:
: Specify the width of the image border using a numerical value plus a unit. Negative values are not allowed; : Specify the width of the image border in the form of a percentage, and convert it with reference to the width and height of the image border area. Negative values are not allowed; : Use a floating point number to specify the width of the image border. This value corresponds to a multiple of border-width. For example, if the value is 2, the actual value of the parameter is 2 * border-width. Negative values are not allowed; - auto: automatically set by the browser. When border-image-width is set to auto, its actual value is the same as border-image-slice.
Tip: The default value of the border-image-width attribute is 1, which means that when we omit the value of the border-image-width attribute, the value of this attribute will be set to 1 * border-width, which is equivalent to using border directly. -width value.
The border-image-width property can also accept 1~4 parameter values:
- If all four parameter values are provided, the width of the image border in the four directions will be set in the order of top, right, bottom, and left;
- If three parameters are provided, the first parameter is used for the top border, the second parameter is used for the left and right borders, and the third parameter is used for the bottom border;
- If two parameters are provided, the first parameter is used for the upper and lower borders, and the second parameter is used for the left and right borders;
- If only one parameter is provided, then top, right, bottom, and left will all use this value to set the width of the image border.
[Example] Use the border-image-width property to set the width of the image border:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
border: 27px solid;
padding: 10px;
border-image-source: url(./border.png);
border-image-slice: 27;
border-image-width: 10px 1 0.5 15px;
}
</style>
</head>
<body>
<div>Replace the default border with an image</div>
</body>
</html>
The running results are shown in the figure below:
Figure: border-image-width property demonstration
4. border-image-outset
The border-image-outset attribute is used to define the outward offset distance of the image border relative to the border boundary (so that the image border extends beyond the box model). The syntax format of this attribute is as follows:
border-image-outset：[ | ]{1,4}
The syntax is explained as follows:
: Specify the outward offset distance of the image border in the form of a specific value plus a unit. Negative values are not allowed; : Use a floating point number to specify the outward offset distance of the image border. This value represents a multiple of border-width. For example, if the value is 2, it means that the offset is 2 * border-width. Negative values are not allowed.
The border-image-outset property can also accept 1~4 parameter values:
- If all four parameter values are provided, the four sides will be acted on in the order of upper, right, lower, and left;
- If three parameter values are provided, the first parameter will be used for the top border, the second parameter will be used for the left and right borders, and the third parameter will be used for the bottom border;
- If two parameters are provided, the first parameter will be used for the upper and lower borders, and the second parameter will be used for the left and right borders;
- If only one parameter is provided, it will apply to all four sides simultaneously.
Example] Use the border-image-outset property to set the outward offset of the image border relative to the border boundary:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
border: 27px solid;
padding: 10px;
margin: 30px 0px 0px 30px;
border-image-source: url(./border.png);
border-image-slice: 27;
border-image-outset: 25px;
background-color: #CCC;
}
</style>
</head>
<body>
<div>Replace the default border with an image</div>
</body>
</html>
The running results are shown in the figure below:
Figure: border-image-outset property demonstration
5. border-image-repeat
The border-image-repeat attribute is used to set how to fill the image border separated by the border-image-slice attribute, such as tiling, stretching, etc. The syntax format of this attribute is as follows:
border-image-repeat：[ stretch | repeat | round | space ]{1,2}
The syntax is explained as follows:
- stretch: Stretch the divided image to fill the border area;
- repeat: Use repeated tiling of the divided image to fill the border area. When the image hits the border, the excess part will be truncated;
- round: Similar to the repeat keyword, except that when the background image cannot be tiled an integer number of times, the image will be scaled according to the situation;
- space: Similar to the repeat keyword, except that when the background image cannot be tiled an integer number of times, empty gaps are filled around the image.
The border-image-repeat attribute can accept 1~2 parameter values:
- If two arguments are supplied, the first argument will be used for the horizontal direction and the second for the vertical direction;
- If only one argument is provided, the value will be applied both horizontally and vertically.
[Example] Use the border-image-repeat attribute to set the filling method of the image border:
Figure: border-image-repeat property demonstration
6. border-image
After understanding the properties of border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat, let’s go back and look at the border-image property. The border-image property is the abbreviation of five border-image-* properties. Five border-image-* properties can be set at the same time through the border-image property.
[Example] Use the border-image attribute to set the image border:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
border: 27px solid;
padding: 10px;
border-image: url(./border.png) 27 round;
}
</style>
</head>
<body>
<div>Replace the default border with an image</div>
</body>
</html>
The running results are shown in the figure below:
Figure: border-image property demonstration
Reprinted at: http://c.biancheng.net/css3/border-image.html