当前位置：网站首页>An article takes you to understand CSS3 picture border

An article takes you to understand CSS3 picture border

2020-11-06 20:48:00 【Python advanced】

5 Line code , Can let wechat small program on the shelf to their own APP in | Register and send it to Dajiang 、 Huawei 、 Cherry keyboard ！>>>

CSS3 Picture frame

Use CSS3 border-image attribute , You can set picture borders around the elements .

One 、 Browser support

The number in the table specifies the first browser version that fully supports this property .

After the number -webkit- perhaps -moz- You need to specify the prefix when you use it .

Two 、CSS3 border-image attribute

CSS3 border-image Property allows you to specify the image to be used instead of the normal boundary around the element . Attributes have three parts :

  1. Pictures as borders .

  2. Where to segment the image .

  3. Make sure the middle part should be repeated or extended .

Take the image below ( be called "border.png") For example ：

Principle analysis ：

border-image Sex divides the image into nine parts , It's like a tic tac toe board . Then put the corner on the corner , The middle part repeats or stretches in a specified order .

Be careful :

Give Way border-image Normal work , Elements also need to set border properties !

1. The middle of the image is repeated to create boundaries , Pictures as borders

CSS Code ：

<!DOCTYPE CSS>
<CSS lang="en">
<head>
  <meta charset="UTF-8">
  <title> project </title>
</head>
<body>

  <p id="borderimg"> ad locum , The middle part of the image is extended to create a boundary .</p>
  <p> Here's the original image :</p><img src="img/border.png">
</body>
</CSS>

The code is as follows ：

#borderimg {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(img/border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(img/border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(img/border.png) 30 round;
}

2. The middle of the image extends to the creation boundary ： Use pictures as borders !

The sample code ：

#borderimg {
                border: 10px solid transparent;
                padding: 15px;
                -webkit-border-image: url(img/border.png) 30 stretch;
                /* Safari 3.1-5 */
                -o-border-image: url(img/border.png) 30 stretch;
                /* Opera 11-12.1 */
                border-image: url(img/border.png) 30 stretch;
            }

Be careful : border-image The attribute is border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat Abbreviation .

1. Different slice values

Different slice values completely change the appearance of the border ：

example 1

border-image: url(border.png) 50 round;

#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(img/border.png) 50 round;
/* Safari 3.1-5 */
-o-border-image: url(img/border.png) 50 round;
/* Opera 11-12.1 */
border-image: url(img/border.png) 50 round;
}

example 2

border-image: url(border.png) 20% round;

#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(img/border.png) 20% round;
/* Safari 3.1-5 */
-o-border-image: url(img/border.png) 20% round;
/* Opera 11-12.1 */
border-image: url(img/border.png) 20% round;
}

example 3

border-image: url(border.png) 30% round;

The code is as follows ：

#borderimg3 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(img/border.png) 30% round;
/* Safari 3.1-5 */
-o-border-image: url(img/border.png) 30% round;
/* Opera 11-12.1 */
border-image: url(img/border.png) 30% round;
}

3、 ... and 、 summary

This article is based on CSS Basics , Use CSS Language , This paper introduces about CSS Knowledge points to define picture borders , Start with the basic concept of attributes ,border-image Usage of , In practical application, we should pay attention to the problems , Made a detailed explanation . Through the demonstration of examples . Hope to help you learn better CSS.

Want to learn more Python Web crawler and data mining knowledge , Go to a professional website ：http://pdcfighting.com/ Want to learn more Python Web crawler and data mining knowledge , Go to a professional website ：http://pdcfighting.com/

版权声明
本文为[Python advanced]所创，转载请带上原文链接，感谢

边栏推荐

猜你喜欢

随机推荐