A detailed introduction to the border attribute of CSS

border's property

1.border-width: does not support percentage, supports keywords, thin (1px), medium (default value, 3px, The reason why the default value is 3px is that border-style is only valid when the border is 3px and above.

Effect), thick (5px)

2.border- style: has different values. The following analyzes the applications of different values

a.solid: triangles and trapezoids can be realized

b.dashed: dashed line, in chrome/Firefox browser , the ratio of dotted line and solid line is 3:1 (thin), in IE browser, the ratio is 2:1 (dense)

　c.dotted: dotted line , in chrome/Firefox browser, it is a square dot, in IE browser, it is a round dot (you can use round dots to achieve the rounded corner effect)

　d.double: double line, calculation rule, double line The width is always equal, and the middle interval is +-1. For example, 3px=1 (inner) + 1 (middle interval) + 1 (outer), which can realize a three-bar graphic.

e.inset (concave), outset (convex), ridge (groove): outdated style, poor compatibility, no usage scenarios

3.border-color: in When specifying color, use color as the border color. You can use this feature to simplify the css style code when the link changes color. For example:

4. Use border to position the background image, because the background image does not calculate the border when positioning

5. Use border to achieve equal height layout, disadvantages It does not support percentage width

(4 and 5 are similar, both use borders to make the distance from a certain side fixed)

The above is the detailed content of A detailed introduction to the border attribute of CSS. For more information, please follow other related articles on the PHP Chinese website!