css web page border code

CSS web page borders are mainly made using borders, so today we will get familiar with the knowledge about CSS borders. Hope it helps everyone

CSS border is the CSS border that controls the width, color, dashed line, solid line and other style CSS properties of the object's border. At the same time, you can enter the CSS manual to view the border manual

DIV+CSS border border knowledge tutorial

Html original border and DIV+CSS border comparison

Html tableControl border:

border="1" bordercolor="#000000"

Description: Control the width of the table border to 1px, the css color to black, and the default is a solid style border.

border border syntax

Four borders

border-left sets the left border. Generally, the left border style is set separately.

border-right sets the right border. , generally use

border-top to set the top border separately to set the right border style separately, generally use

border-bottom to set the bottom border separately to set the top border style separately, and sometimes use it to set the bottom border style separately. The bottom border style can be applied as a css underline effect.

The abbreviation of border with the same border on all four sides

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

Sets a 1px pixel blue solid border of the div object box

3. Three styles of borders

Usually we can set the three attributes and parameters of the border: width (thickness), border style, and border color.

1), border color: border-color:#000

2), border thickness (width): border-width:1px

Use numbers + units to set the border thickness width, such as 1px (border thickness width is 1 pixel). The border must be a positive number, a value greater than 0. Otherwise, setting the border style is invalid.

3), border border style: border-style:solid

The border style value is as follows:

none: No border. Independent of any specified border-width value

hidden: Hide the border. IE does not support

dotted: IE4+ on the MAC platform and IE5.5+ on the WINDOWS and UNIX platforms are dotted lines. Otherwise, it is a solid line (commonly used)

dashed: On the MAC platform, IE4+ and WINDOWS and IE5.5+ on the UNIX platform are dotted lines. Otherwise, it is a solid line (commonly used)

solid: solid line border (commonly used)

double: double-line border. The sum of two single lines and their interval is equal to the specified border-width value

groove: Draw a 3D groove based on the value of border-color

ridge: Draw a diamond border based on the value of border-color

inset: Draw a 3D concave edge according to the value of border-color

outset: Draw a 3D convex edge according to the value of border-color

CSS sets the left border, right border, Top border, bottom border

Write the upper, bottom, left, and right borders in abbreviated form and separate CSS style setting methods

1, 1px black dotted upper border

border-top :1px dashed #000

2, 1px black solid bottom border

border-bottom:1px solid #000

3, 1px black dotted left border

border-left:1px dashed #000

4, 1px black solid right border

border-right:1px solid #000

Commonly recommended border styles

We usually use mainstream browser-compatible border styles:

Solid border: solid

Border:1px solid #000 Set the object to a 1px (pixel) thick black solid border .

Dashed border: dashed

Border:1px dashed #000 Set the object’s 1px (pixel) thick black dotted border.

Use of css border border

Set the object border style, set separate upper border, lower border, left border, and right border styles to achieve beautification and beauty. The border plays the role of segmentation and layout planning.

Border border style optimization abbreviated graphic tutorial

css border application case code

Description: In order to observe the case effect, we set a css width of 200px, css height of 1px, red DIV box with solid border

CSS code:

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

HTML code corresponding fragment:

<div id="divcss5">我的高度为100px,宽度为200px</div>

We use DIV CSS to set the border style, generally we use the abbreviation The expression is used to set the object border style, which saves code and simplifies the code function. Whether setting a single border or a four-sided border, we try to abbreviate the CSS border code, which is the abbreviation of CSS border optimization. Commonly used attribute codes for setting CSS styles on objects are: border:1px solid #000;.

For example, there are borders on the left and right bottom and the style is a black 1PX width solid border, but there is no border on the top.

CSS code: border:1px solid #000; border-top:none;

Note that the order of border:1px solid #000; and border-top:none; cannot be interchanged. Because CSS reading has the principle of reading from top to bottom and from left to right, it makes no sense to set the entire border style first and then declare the top border to "none", that is, to achieve the style required by this instance. This eliminates the need to set the bottom, left, and right settings separately, thereby saving a certain amount of code.

Related Reading:

css example of aligning both ends of a single line of text

##Detailed example of overflow hiding in CSS

Hyperlink tags in html

The above is the detailed content of css web page border code. For more information, please follow other related articles on the PHP Chinese website!