Home > Article > Web Front-end > How to use border-image attribute? Detailed explanation of border-image property tutorial
The content of this article is about how to use the border-image attribute? A detailed tutorial on the border-image attribute has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
In the CSS introductory tutorial, we learned about the border style border-style, in which the border only has a few simple forms such as solid lines, dotted lines, and dotted lines. So what if we want to add a beautiful background image to the border?
In CSS3, we can use the border-image attribute to add a background image to the border.
Explanation:
From syntax analysis, we can see that using the border-image attribute to set the border background image requires setting three parameters:
(1) Image path;
(2) The width of the cut picture (the width of the 4 sides, in order: top, right, bottom, left, in a clockwise direction, similar to the 4-side order of the border attribute);
(3) Image tiling method;
If we want to use the following image as the background image of the (90px×90px) element border, what should we do? (Each small square below is 30px × 30px)
Example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-image属性</title>
<style type="text/css">
#div1
{
width:210px;
height:150px;
border:30px solid gray;
border-image:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat;
-webkit-border-image:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat;
-moz-border-image:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
The content of this article is about the border-image attribute. use? Detailed tutorial on border-image attribute. If you want to know more about CSS3 video tutorial, please pay attention to PHP Chinese website.
The above is the detailed content of How to use border-image attribute? Detailed explanation of border-image property tutorial. For more information, please follow other related articles on the PHP Chinese website!