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:
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?
Recommend
Solution for converting to inline styles in CSS (css-inline)
Talk about the scene Send Email Embedding HTML in...
Install Docker for Windows on Windows 10 Home Edition
0. Background Hardware: Xiaomi Notebook Air 13/In...
Detailed explanation of MySQL date string timestamp conversion
The conversion between time, string and timestamp...
Four categories of CSS selectors: basic, combination, attribute, pseudo-class
What is a selector? The role of the selector is t...
MySQL conditional query and or usage and priority example analysis
This article uses examples to illustrate the usag...
Detailed explanation of Docker+Jenkins+Gitlab+Django application deployment practice
1. Background In the context of rapid updates and...
Solve the problem that Navicat cannot connect to the MySQL server in the Centos system in VMware
Solution to Host 'xxxx' is not allowed to...
How to configure Jupyter notebook in Docker container
Jupyter notebook is configured under the docker c...
Summary of basic knowledge and operations of MySQL database
This article uses examples to explain the basic k...
React Routing Link Configuration Details
1. Link's to attribute (1) Place the routing ...
Some experience sharing on enabling HTTPS
As the domestic network environment continues to ...
Detailed explanation of Linux Namespace User
User namespace is a new namespace added in Linux ...
A brief discussion on the binary family of JS
Table of contents Overview Blob Blob in Action Bl...
Linux kernel device driver character device driver notes
/******************** * Character device driver**...
Docker swarm simple tutorial
swarm three virtual machines 132,133,134 1. Initi...