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

Follow What way to tile. You can fill in two parameters, one parameter, which represents the same tiling in four directions. Two parameters, the first value represents the horizontal direction, and the second value represents the vertical direction.

Online screenshots are not taken well, so there is a little red dot in the middle, just ignore it. This method is not very compatible. Generally, it will not be set unless there are special circumstances.

Finally, the abbreviation:

Only three parameters can be filled in. Slice and repeat can fill in multiple values.

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!