What does css solid mean?

Border is a property of CSS. You can use it to draw borders for HTML tags that can determine the range (such as TD, DIV, etc.). You can add borders to text and dividers to navigation menus. Let’s share an example with you. Friends who are interested can learn about it

People who have made web pages have the experience of worrying about drawing lines. First, let’s get to know “Border”, which is CSS An attribute of , you can use it to draw borders for HTML tags that can determine the range (such as TD, DIV, etc.). It can define the type, width and color of the border line. Using this feature, you can create some special effects.

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 line) ;Border line color: red.

The width of the border line has three standard values: thin (thin line), medium (medium thick line) and thick (thick line),

1. Add a border to the text

In the above example, different borders are added to a piece of text, just to illustrate that the color and thickness of the border line are variable.

The CSS code of the first border 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); type of border line: solid (solid line); color of border line: red (red).

The width of the border line has three standard values: thin (thin line), medium (medium thick line) and thick (thick line).

In addition, the width can also be customized, such as: 1pt, 5px, 2cm, etc.

The type of border line has nine definite values: none (no border line), dotted (dashed line composed of dots), dashed (dashed line composed of short lines), solid (solid line), double (double) line, the width of the double line plus the width of the blank part between them is equal to the width defined by border-width), groove (3D groove-shaped border), ridge (3D ridge-shaped border), inset (3D inline border , darker color), outset (3D external border, lighter color),

Note: If the system does not support the attribute values ​​​​of these borders, then "dotted", "dashed", "double", " groove”, “ridge”, “inset” and “outset” will all be replaced by “solid”.

Color of border line: You can use hexadecimal color code, such as #00ffcc.

As you can see from the above, it is indeed very simple to add borders to text. In the above example, you can understand the settings of the following borders without even explaining them! Here is a little trick for you. To add a border to a piece of text, you can add CSS to the

tag. To add a border to several pieces of text, first enclose those pieces of text with DIV tags, and then add CSS to the

tag. DIV> tag; if you want to add several different borders to a line of text, you need to place the text in a table, and then add CSS to the

tag respectively.

2. Add a dividing line to the navigation menu

The small white line in the above example can of course be done with an image, but here I am using the extension of CSS "border" The attribute draws one side of the border, so the code is much less. The single side of the border is similar to the four sides of the border in the above example. The attributes of the four sides of a border are as follows:

Border line name: border-top (top border line), border-right (right border line) ), border-bottom (bottom border line) and border-left (left border line); the type, width and color of each border line are the same as the "boder" attribute. For example, in this example, you want to define the left border line of each cell as a white line and the width of the line as a solid line of "1px". The CSS code is as follows: style="border-left: 1px solid #ffffff".

When defining the border line separately, if a certain value is not given, its default initial value will be used. It is very convenient to define CSS in Dreamweaver without writing code; it is very convenient to define commonly used border lines once and put them in an external CSS file. You can just call them when you need them.

3. Use border lines of different widths and colors in a border

The effect in this example can of course be achieved using the method in the above example, but that would require too much code. Another merging method can be used to classify the attribute values ​​​​of the four sides together. For example, the code in this example is as follows:

style="border-style:solid; border-width: thin thin thick thick;border-color:#00ff00 #00ff00 #0000ff #0000ff" 。

As can be seen from the above, I classify the type and width of the border line It is defined together with the color classification. Please note a few points here:

1. The position order of the four border lines is: upper border line, right border line, lower border line, left border line;

2. In this example, I only chose one solid line type as the border line type. In fact, the four sides can also be defined with different types respectively;

三、属性值可以定义一个、两个、三个或者四个。如果仅定义一个属性值，则其余三个自动取相同值，如：border-style:solid与border-style:solid solid solid solid的效果完全一样；如果仅给出两个或三个值，那么缺失边的属性值把取与对边相同的值。如：boder-width:thin thick与border-width:thin thick thin thick效果相同，border-width:1px 2px 3px与border-width:1px 2px 3px 2px的效果相同。 

Border属性的灵活应用，可以产生许多特殊效果，方法与上面介绍的相同。 

例子： 

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>一列固定宽度——</title> 
<style type="text/css"> 
<!-- 
#layout { 
border: 2px solid #A9C9E2; 
background-color: #E8F5FE; 
height: 200px; 
width: 300px; 
} 
--> 
</style> 
</head> 
<body> 
<div id="layout">hfhfg</div> 
</body> 
</html>

The above is the detailed content of What does css solid mean?. For more information, please follow other related articles on the PHP Chinese website!