Border (picture border), it is a CSS property, it can be used to determine the range of HTML tags (such as TD, p, etc.) to draw a border, you can add a border to the text, the navigation menu with a divider, the following to share an instance with you, Interested friends can understand that the people who have made the page have to worry about the painting line experience, first to understand the "Border" (picture border), it is a CSS property, it can be used to determine the range of HTML tags (such as TD, p, etc.) border, it can define the border line type, width and color, With this feature, you can make some special effects. The following examples illustrate their application techniques.
1. Add Border to Text
In the above example, a different border is added to a text, just to show that the color and thickness of the border line is variable.
The first border of the CSS code is: style= "Border:thin solid red";
The meaning of the three parameters after "border" is: the width of the border line is: thin (thin line), the type of border line: solid (solid), the color of the border line: Red (red).
The width of the border line has three standard values: thin (thin line), medium (medium thick), and thick (thick line),
In addition, you can customize the width, such as: 1pt, 5px, 2cm and so on.
The type of border line has nine determined values: none (borderless lines), dotted (dashed line consisting of dots), dashed (dashed line consisting of short lines), solid (solid), double (two lines, Double line widths plus the width of the white space between them equals the width of the border-width definition, groove (3D grooved border), Ridge (3D Ridge border), inset (3D inline border, darker color), outset (3D outer border, lighter color) ，
Note: If the system does not support attribute values for 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.
As can be seen from the above, it is very simple to add a border to the text, the above example in the following the settings of the border, I do not say you also understand it! Here to tell you a little bit of text, add a border, you can add CSS to the 〈p〉 tag, a few paragraphs of text with a border, the first paragraph of the text with the P tag, and then add the CSS in the 〈p〉 tag; if you want to add a few different borders to a line of text, you need to put the text in the table. Add the CSS separately to the 〈td〉 tag.
2. Add a divider line to the navigation menu
The small white line in the above example, of course, can be done with the image, but I am here to use the CSS "border" extended property to draw a border edge, so that the code is much less. The edge of the border is similar to the four edges of the border of the previous example, and the properties of the four edges of a border are as follows:
Border Line name: Border-top (Top border), Border-right (right border), Border-bottom (bottom border) and Boder-left (left border line), the type, width, and color of each border line are the same as the Boder property. In this example, to define a white line for the left border of each cell and a solid line with a line width of "1px", the CSS code is: style= "border-left:1px solid #ffffff".
When you define a border line individually, the default initial value is taken if a value is not given. It is very convenient to define CSS in Dreamweaver, not to write code, to define the usual border lines once and put them in the outer-connected CSS file.
3, in a border with a different width and color of the border line
The effect in this example can, of course, be implemented using the method in the example above, but with too much code, you can use another method of merging to classify the attribute values of the four edges 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 can be seen from the above, I have defined the type, width and color of the border lines together, here are a few points to note:
The position order of the 一、四条 border line is: the top frame line, the right border line, the bottom line, the left frame line;
Second, I in this example, the type of the border line only takes a real line type, in fact, four edges can also be defined by different types;
The attribute value can be defined as 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 identical to border-style:solid solid solid solid, and if only two or three values are given, Then the attribute value of the missing edge is taken to 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 the border attribute can produce many special effects, the same way as described above.
Example:
The code is as follows:
