Deep understanding of CSS learning notes border and css learning notes

Deep understanding of CSS learning notes border and css learning notes

1. border-width

Border-width does not support percentages: semantics and scenarios are determined. In reality, the concepts of borders do not support percentages.

Border-width supports keywords: thin, medium (default), and thick. The values are 1px, 3px, and 5px (except IE7 ).

Why is the default value of border-width medium (3px)? Because border-style is double, it takes at least 3px to see the effect.

2. border-style

Border-style is some interesting data about dashed:

　　

Differences between border-style and dotted browsers:

　　

The dot Effect of IE can be used to achieve the rounded corner effect under IE7/8.

The calculation rule for the border-style is double: the borders on both sides are always equal, with an interval of ± 1 in the middle.

Border-style is double to implement the triplicate icon:

3. border-color

Border-color: by default, border-color has the same value as color, such as box-shadow and text-shadow.

4. Create border and triangle Images

　　Using border's solid style, You Can skillfully construct triangles:

　　

You can also use the stitching method to bring up and down two small trapezoid shapes to form the effect of rounded corners:

　　　　

5. border and transparent border

Transparent border functions:

• Add a click area.
  
• Add a rendering area.
  

6. border application in Layout

High la s implemented by border (the border size cannot be a percentage, so the left side is fixed width ):