How to use border-image attribute? Detailed explanation of border-image property tutorial-CSS Tutorial-php.cn

How to use border-image attribute? Detailed explanation of border-image property tutorial

云罗郡主

Release： 2018-10-23 16:06:49

forward

4016 people have browsed it

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>

Copy after login

How to use border-image attribute? Detailed explanation of border-image property tutorial

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!