Using CSS to border attributes skillfully

Css

People who have made web pages have a problem with drawing lines, and the tips presented in this article may help you. Let's get to know the "Border" (border), it is a property of CSS, it can give a range of HTML tags (such as TD, Div, etc.) to draw a border, it can define the type of border line, width and color, using this feature, you can make some special effects. The following examples illustrate their application techniques.

1. Add a border to the text

In the example above, a different border is added to the text to show that the border line is variable in color and thickness. The CSS code for the first border is: style= "Border:thin solid Red", and the three parameters following "border" mean the width of the border line: thin (thin line), the type of the border line: solid (solid), and the color of the border line: Red (red). We define the border, which is actually setting these three parameter values.
The width of the border line has three standard values: thin (thin lines), medium (thick lines), and thick (thick), in addition, you can customize the width, such as: 1pt, 5px, 2cm, and so on.
The type of the border line has nine definite values: none (no border), dotted (dotted line), dashed (dotted line with dash), solid (solid line), double (double line, The two-line width plus the width of the white space between them equals the width defined by border-width, Groove (3D grooved border), Ridge (3D ridge-shaped border), inset (3D inline border, darker color), outset (3D outer border, lighter color) , note that if the system does not support the property values of these borders, then "dotted", "dashed", "Double", "Groove", "Ridge", "inset" and "outset" will be replaced by "solid".
Color of the border line: You can use hexadecimal color codes, such as #00ffcc.
From the above can be seen, the text with a border is really very simple, in the example of the following several border settings, I do not say you understand it! Here's a little tip for you to add a border to a piece of text, CSS can be added to the 〈p〉 tag, a few pieces of text with a border, first the paragraphs with a DIV tag, and then add CSS to the 〈div〉 tag; if you want to add a few different borders to a line of text, you need to put the text in a table, Then add the CSS to the 〈td〉 tag separately.

2, to the navigation menu plus divider line

The white line in the example above, of course, can be done with images, but I am here to use the CSS "border" extended properties of the border to draw a side, so the code is much less. One side of the border is similar to the four edges of the previous example's border, and the properties of the four edges of a border are as follows:
Border Line name: border-top (top border line), Border-right (right border), Border-bottom (bottom border) and Boder-left (left border); the type, width, and color of each border line are the same as the "Boder" property. In this example, to define the left border of each cell as a white line and a solid line with a width of "1px", the CSS code is this: style= "border-left:1px solid #ffffff".
When you define a border line individually, if you do not give a value, the default initial value is taken. The definition of CSS in the Dreamweaver is very convenient, do not write code, the common border line once defined, put in the external CSS file, to use the call on the line, very convenient.

3, in a border with different width and color of the border line

The effect in this case, of course, can be implemented using the method in the previous example, but with too much code, another method of merging the attribute values of the four edges is sorted together, as in the code for this example:
Style= "BORDER-STYLE:SOLID; Border-width:thin thin thick thick;border-color: #00ff00 #00ff00 #0000ff #0000ff ".
As you can see from the above, I have defined the type, width, and color of the border line, and here are some points to note:
The 一、四条 border lines are in order: top, right, bottom, and left;
Two, I in this case the border line type only takes one kind of solid line type, actually four edges may also define the different type separately;
Three, the attribute value can define one, two, three, or four. If you define only one property value, the remaining three automatically take the same value, such as: Border-style:solid is exactly the same as border-style:solid solid solid solid; If only two or three values are given, The property value of the missing edge will take the same value as the edge. such as: Boder-width:thin thick and border-width:thin thick thin thick the same effect, border-width:1px 2px 3px and border-width:1px 2px 3px 2PX has the same effect.
The flexible application of border attributes can produce many special effects, the same method as described above, no longer one by one examples.