Css border, css

Css border, css

CSS border is used to set the border of HTML elements (such as div), including the border width, color, and style. This article introduces the details of CSS border attributes to coders. For more information about coders, see.

CSS border: CSS border-border style color, border style, border Width syntax structure and application case tutorial

 

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 tutorial and provide the CSS manual to view border.

 

Ii. Comparison between the original Html border and the 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

#manong{border:1px solid #00F}

1 px pixel blue solid line border of manong object box set

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. 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.

 

VII. 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:

#manong{height:100px;width:200px;border:1px solid #F00}

HTML code snippet:

<Div id = "manong"> my height is 100px and the width is 200px </div>

 

VIII. Summary of css border

We use 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. css border setting 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.

Related reading:

Css tutorial

Html tutorial

Css Reference Manual

 

Address: http://www.manongjc.com/article/841.html