[CSS disclosure] continuous image border

Background knowledge: Border-image, gradient, multiple backgrounds, CSS animations

Background Knowledge Explained

1. Border-image

The border applies a background image, and the image is automatically divided into four equal portions, respectively, for four borders. When you use the Border-image property, the border style that is set for the Border-style property is replaced. If Boder-image-source is none or the picture cannot be displayed, the Border-style property is applied.

Grammar

Boder-image:border-image-source border-image-slice border-image-width Border-image-outset border-image-repeat

Initial value

Border-image:none 100% 1 0s stretch

No inheritance

Border-image-width Defining image border widths

If the border-image-width is greater than the specified border-width, the internal extension is

Value: Percent pixel number (border-width multiple) auto

All/vertical Horizontal/top Horizontal bottom/top right bottom left

Background:linear-gradient (white) Padding-box, repeating-linear-gradient ( -45deg, red 0, Red 12.5%, transparent 0 , Transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 0/80px 80px;

My border is reminiscent of vintage envelopes.

Background using gradients for multiple backgrounds

Border-image can also achieve the same effect, but there are a few things to note during use:

1. Border-image-slice changes, you need to change the Border-width

2. Border-image-slice border thickness specified as pixel units, no EM units supported

3. Border-image-slice changes, if you are using a gradient, you may need to modify the position information of the color label

Ant Marching Border

You can customize a variety of special style dashed boxes: the color, length, and clearance of dashed line segments.

Footnote

1. This is a footnote.

[CSS disclosure] continuous image border