border 属性使您可以指定表示元素的边框。您可以更改边框的三个属性-
border-color : 指定边框的颜色。
border-style : 指定边框样式为solid，dashed line，double。
border-width : 指定边框的宽度。
现在，无涯教程将通过示例了解如何使用这些属性。
border-color 属性
border-color属性设置元素的所有边框中可见部分的颜色。
border-bottom-color : 底部边框的颜色。
border-top-color : 顶部边框的颜色。
border-left-color : 左边框的颜色。
border-right-color : 右边框的颜色。
以下示例显示了所有这些属性的效果-
<html>
<head>
<style type="text/css">
p.example1 {
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2 {
border:1px solid;
border-color:#009900; /* Green */
}
</style>
</head>
<body>
<p class="example1">
This example is showing all borders in different colors.
</p>
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"example2"</span><span class="tag">></span><span class="pln">
This example is showing all borders in green color only.
</span><span class="tag"></p></span><span class="pln">
</body>
</html>
它将产生以下输出-
border-style 属性
border-style属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
none - 无边框。 (相当于border-width:0;)
solid - 边框是一条实线。
dotted - 边框是一系列点。
dashed - 边框是一系列短线。
double - 边框是两条实线。
groove - 边框看起来像刻在页面上。
ridge - 边框与凹槽相反。
inset - 边框使框看起来像嵌入在页面中。
outset - 边框使框看起来像是从画布中出来的。
您可以使用以下属性分别更改元素的底部，左侧，顶部和右侧边框的样式-
border-bottom-style : 底部边框的样式。
border-top-style : 顶部边框的样式。
border-left-style : 左边框的样式。
border-right-style : 右边框的样式。
以下示例显示了所有这些边框样式-
<html>
<head>
</head>
<body>
<p style="border-width:4px; border-style:none;">
This is a border with none width.
</p>
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">border</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="lit">4px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln">solid</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
This is a solid border.
</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">border</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="lit">4px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln">dashed</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
This is a dashed border.
</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">border</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="lit">4px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="kwd">double</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
This is a double border.
</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">border</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="lit">4px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln">groove</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
This is a groove border.
</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">border</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="lit">4px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln">ridge</span><span class="atv">"</span><span class="tag">></span><span class="pln">
This is a ridge border.
</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">border</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="lit">4px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln">inset</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
This is a inset border.
</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">border</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="lit">4px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln">outset</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
This is a outset border.
</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">border</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="lit">4px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln">hidden</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
This is a hidden border.
</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">border</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="lit">4px</span><span class="pun">;</span><span class="pln">
border</span><span class="pun">-</span><span class="pln">top</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln">solid</span><span class="pun">;</span><span class="pln">
border</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln">dashed</span><span class="pun">;</span><span class="pln">
border</span><span class="pun">-</span><span class="pln">left</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln">groove</span><span class="pun">;</span><span class="pln">
border</span><span class="pun">-</span><span class="pln">right</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="kwd">double</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
This is a a border with four different styles.
</span><span class="tag"></p></span><span class="pln">
</body>
</html>
它将产生以下输出-
border-width 属性
border-width属性允许您设置元素边框的宽度。此属性的值可以是px，pt或cm的长度，也可以设置为thin，medium或thick。
您可以使用以下属性分别更改元素的底部，顶部，左侧和右侧边框的宽度-
border-bottom-width : 底部边框的宽度。
border-top-width : 顶部边框的宽度。
border-left-width : 左边框的宽度。
border-right-width : 右边框的宽度。
以下示例显示所有这些边框宽度-
<html>
<head>
</head>
<body>
<p style="border-width:4px; border-style:solid;">
This is a solid border whose width is 4px.
</p>
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">border</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="lit">4pt</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln">solid</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
This is a solid border whose width is 4pt.
</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">border</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln">thin</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln">solid</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
This is a solid border whose width is thin.
</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">border</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln">medium</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln">solid</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
This is a solid border whose width is medium;
</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">border</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln">thick</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln">solid</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
This is a solid border whose width is thick.
</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">border</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="lit">4px</span><span class="pun">;</span><span class="pln">border</span><span class="pun">-</span><span class="pln">top</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="lit">10px</span><span class="pun">;</span><span class="pln">
border</span><span class="pun">-</span><span class="pln">left</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2px</span><span class="pun">;</span><span class="pln">border</span><span class="pun">-</span><span class="pln">right</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="lit">15px</span><span class="pun">;</span><span class="pln">border</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln">solid</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
This is a a border with four different width.
</span><span class="tag"></p></span><span class="pln">
</body>
</html>
它将产生以下输出-
Border 简写属性
border属性可让您在一个属性中指定线条的颜色，样式和宽度-
下面的示例演示如何将所有三个属性都使用为单个属性。这是在任何元素周围设置边框的最常用属性。
<html> <head> </head><body> <p style="border:4px solid red;"> This example is showing shorthand property for border. </p> </body> </html>
它将产生以下输出-
