Common properties + usage of CSS3 picture border

Note:
At present, only some browsers support border image attribute; If the code is correct, but the content cannot be displayed, you can try to view it in another browser

Syntax of picture border:
border-image:border-image-source border-image-slice border-image-repeat
Three parameters [picture address; clipping value; tiling method]
For example → border image: URL (img_fx / background. PNG) 100 stretch;

Key points of picture border display:
The border attribute does not write the border size. If border image is set, it cannot be displayed
Three parameters [border size style color]
border: 5px solid pink;

Explanation of border image parameters:

  • Parameter I
    Picture address, set the url of the border such as the slice

  • Parameter 2
    Clipping [there are 1-4 parameters, the upper right lower left clockwise clipping] the most commonly used is to cut four knives on the border picture with one parameter to make it become a nine palace picture

For example, the schematic diagram of "30% 35% 40% 30%" cutting is shown in the figure below:

  • Parameter 3
    There are three values for repetition mode;
    round tiling, repeat, stretch [default]

Border picture to help understand

1. 3, 7 and 9 are blind areas; No stretching, no repetition, no tiling

The difference between tiling and repetition:
Tiling: for complete tiling, the size of a single element will be changed
Repeat: the size will not be changed, but in order to cover, the part will be cut to fill
repeat is not recommended. It may be cut and unsightly

Set tile border picture:

Code to achieve the above effect:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Tile picture borders</title>
    <style type="text/css">
        .box {
            height:170px;
            width:170px;
            float:left;
            border:40px solid;
            background-image:url(img_fx/h2.jpg);
            margin:5px;
        }
        .b1 {
            border-image:url(img_fx/border.png) 27 round;
        }
        .b2 {
            border-image:url(img_fx/background.png) 100 round;
        }
    </style>
</head>
<body>
    <div>
        <div class="box b1"></div>
        <div class="box b2"></div>
    </div>
</body>

Set repeating border picture:
Code to achieve the above effect:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Repeat picture border</title>
    <style type="text/css">
        .box {
            height:170px;
            width:170px;
            float:left;
            border:40px solid;
            background-image:url(img_fx/h2.jpg);
            margin:5px;
        }
        .b1 {
            border-image:url(img_fx/border.png) 27 repeat;
        }
        .b2 {
            border-image:url(img_fx/background.png) 100 repeat;
        }
    </style>
</head>
<body>
    <div>
        <div class="box b1"></div>
        <div class="box b2"></div>
    </div>
</body>

[default parameter] set stretched border picture:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Stretch picture border</title>
    <style type="text/css">
        .box {
            height:170px;
            width:170px;
            float:left;
            border:40px solid;
            background-image:url(img_fx/h2.jpg);
            margin:5px;
        }
        .b1 {
            border-image:url(img_fx/border.png) 27 stretch;
        }
        .b2 {
            border-image:url(img_fx/background.png) 100 stretch;
        }
    </style>
</head>
<body>
    <div>
        <div class="box b1"></div>
        <div class="box b2"></div>
    </div>
</body>

Summary [how to set picture borders]:

  1. Set border properties → border
  2. Set the picture border attribute → border image, and set the corresponding clipping value according to the size of the border picture
  3. Select the appropriate repetition method

reminder:
Don't forget to pay attention to the friends who like sharing grey discs. In this way, you won't get lost when you want to find me*

contact information:
Vx+: LHD7575

Tags: C

Posted by Awesome Trinity on Mon, 02 May 2022 21:55:54 +0300