CSS3 Frame Temperature

1. Introduction: The Border property has been defined in CSS1 to set the element border style, set different borders, colors, weights

2. Basic properties, including three types of values:
(1) Border-width: Sets the thickness of the element border, default 3~4px
(2) Border-color: Sets the color of the element border, the default color is the font color
(3) Border-style: Sets the type of the element border, default "None"
Abbreviation syntax: border:border-width border-style border-color;
NOTE: After the abbreviation, each attribute is separated by a space, and there is no precedence between them

3. In the actual production of the web, CSS border can set different styles for different sides, which adhere to the "TRBL" principle (top/right/bottom/left), the individual wording:
Border-top-style (Sets the top border type of the element)
Border-right-style (set element right border type)
Border-bottom-style (Sets the bottom border type of the element)
Border-left-style (set element left border type)
Similarly: both Border-color and border-width can be set individually
Note: This individual setting is divided into four situations: (1) When a value is set to four edges setting the same (2) two values, the first value represents the upper and lower edges, the second value represents the left and right side (3) three values, the first value represents the top, the second value represents the left and right, The third value represents the bottom (4) Four worth of time, followed by the upper, right, bottom, left, clockwise direction set
Super combination Dafa: Li{border:solid 1px red;border-width:1px 0;}, only two lines of code express the element Li top and bottom are a red solid line of 1px. This facilitates the maintenance of code and improves CSS performance
Super combination Dafa caused by thinking: suddenly feel a flash, their daily use of border can be said to reach the point of ease, but they have never classified to think about it, is extremely ashamed, write down with everyone to encourage
(1) element sets a stroke: this situation is set to excellent using the BORDER-T/R/B/L method
(2) Element set two strokes (position is opposite or connected): This situation uses the combination of DAFA as the superior
(3) Element set three strokes: This situation uses the combination of DAFA as the optimal
(4) Element set four strokes: This situation uses the combination of DAFA as the optimal
Of course, these are the same on the premise of the same stroke, different when the difference in the use of the T/R/B/L on the property can be
Summary: Future thinking of the problem should be hierarchical, classification, from different angles to examine

4. Type of border: Border-style Value List

The above 11 values are rendered differently under each browser, where the most unpredictable border style is double, and the width of the two lines and the width of the lines cannot be determined. Dotted, dashed, outset and inset are not guaranteed to be consistent under different browsers.

What else is the CSS3 border: Border-image, Border-radius, Box-shadow

5.border-radius settings
Following the TRBL rules (Top/right/bottom/left), you can set 1, 2, 3, 4 values, which are round One-fourth
eg:border-radius:60px 40px 30px 20px;
Set the horizontal and vertical radius values individually: (One-fourth of the ellipse)
border-radius:60px 40px 30px 20px/30px 20px 10px 5px;

6. Special applications
(1) Border-radius also has a difference between the inner radius and the outer radius, when the element border value is large, the effect is obvious. When the Border-radius radius value is less than or equal to the thickness of border, the inner edge of the element border does not have a fillet effect

Inner radius of element = Outer Radius-border width

(2) The second is that the adjacent edge of the element has a different width, the angle will be a wide smooth transition to the narrow side, one of the edges can even be 0, the element adjacent to the corner is from the big to small turn

Also, the picture application fillet, the table applies the fillet, actually can not border-width, the direct increase one layer can avoid border-width and border-radius the contradiction between the two

(3) Compatibility

Make a circle (set 4 properties), Semicircle (set two properties), sector (set a property), ellipse (x/y)

7.box-shadow
can be used as border, no internal and external radius of the points, and not calculated in the structure;
Multi-layer shading with commas "," separate

Compatible with the following versions of IE8, you can use the IE filter for simulation:

Filter:progid:DXImageTransform.Microsoft.Shadow (color= "color value", direction= shadow Radius (numeric), strength= shadow radius (value))

CSS3 Frame Temperature