本文概述
- 1）CSS边框样式
- 2）CSS边框宽度
- 3）CSS边框颜色
CSS边框属性用于指定元素边框的样式, 颜色和大小。 CSS边框属性如下
- 边框样式
- 边框颜色
- 边框宽度
- 边界半径
有一些边框样式值与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">
No border.<
/p>
<
p class="dotted">
A dotted border.<
/p>
<
p class="dashed">
A dashed border.<
/p>
<
p class="solid">
A solid border.<
/p>
<
p class="double">
A double border.<
/p>
<
p class="groove">
A groove border.<
/p>
<
p class="ridge">
A ridge border.<
/p>
<
p class="inset">
An inset border.<
/p>
<
p class="outset">
An outset border.<
/p>
<
p class="hidden">
A hidden border.<
/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”。
注意：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>
