CSS border attribute tutorial (color style), cssborder

CSS border attribute tutorial (color style), cssborder

CSS borderThat isCSS border-border syntax structure of border style color, border style, and border Width and Case Study

 

I. basic CSS border knowledge

CSS border (CSS border) is a CSS attribute that controls the border edge width, color, dotted line, solid line, and other style CSS attributes of an object. At the same time you can go to the Code farming tutorials to provide CSS manual view border Manual: http://www.manongjc.com/cssref/pr_border.html

Ii. Comparison between the original Html border and the DIV + CSS border

Html table control border:
Border = "1" bordercolor = "#000000"
Note: The Border width of the control table is 1 px, And the css color is black. The default value is the solid-line border.

3. border syntax

1. Four borders
Border-leftSet the left border. Generally, use the left border style separately.
Border-rightSet the right border. Generally, you can set the right border style separately.
Border-topSet the upper border. Generally, you can set the upper border style separately.
Border-bottomSet the lower border. Generally, you can set the lower border style separately. You can use the lower border style as a css underline.

2. boder with the same four sides
# Divcss5 {border: 1px solid # 00F}
Set divcss5 object box 1px pixel blue solid line Border

3. Three border styles
Generally, we can set the Border width (thickness), border style, border color attributes and parameters.

1) border color: border-color: #000

2) border thickness (width): border-width: 1px
Set the Border thickness width by number + unit. For example, if the Border width is 1 px (the Border thickness is 1 pixel), the border must be a positive number and a value greater than 0. Otherwise, the border style is invalid.

3) border style: border-style: solid

The border style value is as follows:
None: no border. It is irrelevant to any specified border-width value.
Hidden: Hide the border. Internet Explorer does not support
Dotted: IE4 + on MAC and IE5.5 + on WINDOWS and UNIX platforms. Otherwise, it is a solid line (commonly used)
Dashed: IE4 + on MAC and IE5.5 + on WINDOWS and UNIX platforms are dotted lines. Otherwise, it is a solid line (commonly used)
Solid: solid border (commonly used)
Double: double-line border. The sum between the two single lines and their intervals is equal to the specified border-width value.
Groove: Draw a 3D groove Based on the border-color value
Ridge: draws a diamond border based on the border-color value
Inset: draws a 3D Concave edge based on the border-color value.
Outset: Draw 3D convex edges Based on border-color values.

4) Border style:

Border-style

4. Set the left border, right border, top border, and bottom border separately in CSS.

Separate CSS style settings for the bottom, left, and right borders

1. frame on the black dotted line of 1px
Border-top: 1px dashed #000

2. 1px black real-line bottom border
Border-bottom: 1px solid #000

3. The left border of the 1px black dotted line
Border-left: 1px dashed #000

4. 1px black solid-line right border
Border-right: 1px solid #000

5. Recommended border styles

We usually use mainstream browsers with compatible border styles:

1. solid border: solid
Border: 1px solid #000 sets the solid black Border of the object 1px (pixel.

2. dotted border: dashed
Border: 1px dashed #000 sets the black dotted Border of the object 1px (pixel.

Vi. css border usage

Set the border style of the object, and set a single upper border, lower border, left border, and right border style to beautify the appearance. Border is used for separation and layout planning.

7. Simplified graphic tutorial for border Style Optimization

CSS border attribute syntax structure analysis graph (simplified and optimized border)

VIII. css border application case code

Description: To observe the effect of the case, we set a DIV box with a css width of 200px, a css height of 1px, and a red solid-line border.

CSS code:
# Divcss5 {height: 100px; width: 200px; border: 1px solid # F00}

HTML code snippet:
<Div id = "divcss5"> my height is 100px and the width is 200px </div>

9. Case study of css border-TOP

Demonstration case of border style Application

10. Summary of css border

We use div css to set the border style. Generally, we use a short expression to set the border style of the object, which saves the effect of code simplification. Whether you set an edge border or a four-side border, we try to abbreviated CSS border Code as short as possible, CSS border is simplified, and common attribute code is used for setting CSS styles for objects: border: 1px solid #000 ;.

11. The three sides have edges while the other side have no setup skills

For example, there is a border between the left and right sides and the style is black 1 px width solid line border, but there is no border on the top.

CSS code: border: 1px solid #000; border-top: none;
Note: border: 1px solid #000; and border-top: none; the order before and after cannot be changed. Because CSS reading has the principle of reading from top to bottom and from left to right, the entire border style is set first, and then the top border on the top is declared as "none" is meaningless, that is, the style required by the instance. Therefore, you do not need to set lower, left, and right, saving some code.

 

Refer:

Http://www.manongjc.com/article/1196.html

Http://www.manongjc.com/article/1197.html

Http://www.manongjc.com/article/1198.html

Http://www.manongjc.com/article/1199.html