Home >Web Front-end >Front-end Q&A >How to implement lace borders in css3
In CSS, you can use the border-image attribute to achieve a lace border. The border-image attribute can use images to create borders, that is, add a background image to the border. You only need to specify the background image as a lace style; the syntax "border-image: url (image path) offsets the image border width inward. Whether outset is repeated;".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
In CSS, you can use the border-image attribute to achieve a lace border.
css border-image attribute
The border-image attribute can use images to create borders, that is, add a background image to the border . That's right, pictures can also be added to the usual small strip of borders.
border-image is a shorthand attribute:
border-image-source: used to specify the location of the image to be used to draw the border
border-image-slice: The image border is offset inward
border-image-width: The width of the image border
border-image-outset: Used to specify the amount of border-image-area drawn outside the border
border-image-repeat: Used to set whether the image border should be repeated (repeat ), stretch or round.
Omitted values are set to their default values.
1. border-image-source: url()
Set the path of the border image
2. border-image-slice: 100 100 100 100 fill
is used to specify the 4 positions from which to split the image (following the order of top, right, bottom and left).
You can fill in 5 parameters. The first 1~4 parameters are divided according to the position of the line, in the order of top, right, bottom and left. The value setting is the same as the abbreviation of other values. 2 values are provided That is, up, down and left and right. Provide 1 value to set the position of 4 lines. Note that only numbers and percentages can be filled in, and px cannot be added. 100 is equal to 100px
So how is it divided? See the picture below for a detailed explanation. It may look a bit messy, but if you look carefully, you can still understand it. The blue number 9 is the content area. If the fifth parameter fill is not filled in, it will be blank.
3. border-image-width: 1
Set the border The width of the image. You can set numbers, and px. Numbers mean how many times they are. If it is 1, it is 1 * border-width, and auto can also be set. The calculation method of auto is to take the value of border-image-slice and then add px. If the value of border-image-slice is 100, then take it and add px to get 100px.
##4. border-image-outset: 100px 100px 100px 100px
In the original On the basis of this, the top, right, bottom and left are expanded by 100px, which can be abbreviated. You can also set numbers, and the same goes for numbers. It means several times. 1 represents 1 times, that is,1* border-width(100) = 100px
5, border- image-repeat:
Parameters:stretch
repeat
round
space
Finally, the abbreviation:
border-image: url(./img/Snipaste_2019-07-16_16-39-16.png) 100 space; /* 简写: 三个参数 source slice repeat */(Learning video sharing:
css video tutorial, web front-end)
The above is the detailed content of How to implement lace borders in css3. For more information, please follow other related articles on the PHP Chinese website!