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
Write a mysql data backup script using shell
Ideas It's actually very simple Write a shell...
How to load the camera in HTML
Effect diagram: Overall effect: Video loading: Ph...
How to install MySQL for beginners (proven effective)
1. Software Download MySQL download and installat...
It is not recommended to copy the content in Word directly to the editor on the website.
<br />Question: Why is it not recommended to...
Should nullable fields in MySQL be set to NULL or NOT NULL?
People who often use MySQL may encounter the foll...
Research on Web Page Size
<br />According to statistics, the average s...
Tips on making web pages for mobile phones
Considering that many people now use smartphones, ...
How to deploy Spring Boot using Docker
The development of Docker technology provides a m...
Vue project realizes paging effect
The paging effect is implemented in the vue proje...
WeChat applet calculator example
WeChat applet calculator example, for your refere...
Detailed explanation of JS ES6 coding standards
Table of contents 1. Block scope 1.1. let replace...
Analysis of MySQL's method of implementing fuzzy string replacement based on regular expressions
This article uses an example to describe how to u...
Detailed summary of mysql sql statements to create tables
mysql create table sql statement Common SQL state...
Vue implementation example using Google Recaptcha verification
In our recent project, we need to use Google robo...
Database issues and pitfalls in connecting to cloud servers with Navicat Premium15
When using a cloud server, we sometimes connect t...