An article to help you learn CSS3 picture borders

Using the CSS3 border-image property, you can set an image border around an element.

1. Browser support

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

The -webkit- or -moz- following the number needs to be prefixed when used.

2. CSS3 border-image property

The CSS3 border-image property allows you to specify an image to be used in place of the normal border around an element. A property has three parts:

The image to use as the border.
Where to segment the image.
Determine whether the middle section should be repeated or extended.

Take the following image (called "border.png") as an example:

Principle analysis:

The border-image property divides the image into nine sections, like a tic-tac-toe board. The corners are then placed at the corners and the middle section is repeated or stretched in the specified order.

Notice:

For border-image to work properly, the element also needs to have border properties set!

1. The middle part of the image is repeated to create a border, and the image is used as a frame

CSS code:

<!DOCTYPE CSS>

<CSS lang="en">

<head>

  <meta charset="UTF-8">

  <title>Project</title>

</head>

<body>

  <p id="borderimg">Here, the middle of the image is extended to create the border.</p>

  <p>Here is 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 create a border: Use a picture as a border!

Example 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;

            }

Note: The border-image property is an abbreviation for border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat.

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;

}

Conclusion

This article is based on CSS basics and uses CSS language to introduce the knowledge points about CSS definition of image borders. It starts with the basic attribute concepts, the usage of border-image, and the issues that need to be paid attention to in practical applications, and gives a detailed explanation. Through demonstrations of examples. I hope this helps you learn CSS better.

If you want to learn more about Python web crawlers and data mining, you can go to the professional website: http://pdcfighting.com/

This is the end of this article about learning CSS3 picture borders in one article. For more relevant CSS3 picture borders content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<: Detailed explanation of the seven data types in JavaScript

>>: Why are the pictures on mobile web apps not clear and very blurry?