CSS border
CSS border是用于在元素上设置边框的简写属性。
CSS 边框属性用于指定元素边框的样式,颜色和大小。 CSS边框属性在下面给出
border-style
border-color
border-width
border-radius
1)CSS border-style
"border-style"属性用于指定要在网页上显示的边框类型。
有一些边框样式值与border-style属性一起使用以定义边框。
值 |
说明 |
none |
它没有定义任何边框。 |
dotted |
它用于定义虚线边框。 |
dashed |
它用于定义虚线边框。 |
solid |
用于定义实线边框。 |
double |
它定义了两个具有相同边框宽度值的边框。 |
groove |
它定义了一个3d沟槽边框。效果是根据边框颜色值生成的。 |
ridge |
它定义了一个3d脊形边框。效果是根据边框颜色值生成的。 |
inset |
它定义了3d插入边框。效果是根据边框颜色值生成的。 |
outset |
它定义3d起始边框。效果是根据边框颜色值生成的。 |
<!DOCTYPE html>
<html>
<head>
<style>
p.none {border-style: none;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}
</style>
</head>
<body>
<p class="none">没有边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove">凹槽边框。</p>
<p class="ridge">山脊边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">起始边框。</p>
<p class="hidden">隐藏边框。</p>
</body>
</html>
输出:
没有边框。
虚线边框。
虚线边框。
实线边框。
双边框。
凹槽边框。
山脊边框。
嵌入边框。
起始边框。
隐藏边框。
2)CSS边框宽度
border-width属性用于设置边框的宽度。以像素为单位设置。您还可以使用三个预定义的值之一(细,中或粗)来设置边框的宽度。
注意: border-width属性不能单独使用。它总是与其他边框属性(例如" border-style"属性)一起使用,以首先设置边框,否则将无法使用。
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>
<p class="one">Write your text here.</p>
<p class="two">Write your text here.</p>
<p class="three">Write your text here.</p>
</body>
</html>
3)CSS边框颜色
有三种方法可以设置边框的颜色。
名称:它指定颜色名称。例如:"红色"。
RGB:它指定颜色的RGB值。例如:" rgb(255,0,0)"。
十六进制:它指定颜色的十六进制值。例如:"#ff0000"。
还有一种名为"透明"的边框颜色。如果未设置边框颜色,则从元素的color属性继承。
注意: border-color属性不能单独使用。它总是与其他边框属性(例如" border-style"属性)一起使用,以首先设置边框,否则将无法使用。
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: #98bf21;
}
</style>
</head>
<body>
<p class="one">This is a solid red border</p>
<p class="two">This is a solid green border</p>
</body>
</html>