CSS 边框

CSS 边框

那么什么是CSS 边框属性呢?

我们可以通过边框来设置我们元素边框的颜色和样式。

那么什么是边框样式呢?

我们可以使用border-style来设置我们想要的边框样式，它有下面这几种值可以设置:

outset: 设置3D边框
inset:设置3D的嵌入边框
ridge: 设置3D脊边框
groove: 设置3D沟槽边框
double: 设置两个边框
solid: 设置实线边框
dashed: 设置虚线边框
dotted: 设置点线边框
none: 不显示边框

那么什么是边框宽度呢?

我们可以使用border-width来设置我们想要的宽度啊。
举例说明:

h1.test1
{
	border-width:4px;
    border-style:solid;
}
h2.test2
{
	border-width:medium;
    border-style:solid;
}

那怎样设置边框颜色呢?

我们可以通过border-color来设置我们想要的遍历颜色，比如：
···
Hex - 指定16进制值, 如 “#aaaaaa”
RGB - 指定 RGB 值, 如 “rgb(0,244,0)”
name - 指定颜色的名称，如 “green”
···
**注意:**除了设置border-color之外，我们还需要设置border-style(边框样式)，才能达到我们的效果。
举例说明:

h1.test1
{
	border-color:green;
    border-style:solid;
}
h2.test2
{
	border-color:#aaaaaa;
    border-style:solid;
}

那么我们怎样单独设置每个边框的边呢?

举例说明:

h1
{
	border-left-style:solid;
	border-bottom-style:dotted;
	border-right-style:solid;
    border-top-style:dotted;
}

那么border-style有哪些值可以设置呢?

border-style:dotted solid double dashed;

• 左边框是 dashed
• 底边框是 double
• 右边框是 solid
• 上边框是 dotted

border-style:dotted solid double;

• 底边框是 double
• 左、右边框是 solid
• 上边框是 dotted

border-style:dotted solid;

• 右、左边框是 solid
• 上、底边框是 dotted

border-style:dotted;

• 四面边框是 dotted

那么怎样简写边框的属性呢?

我们可以使用border来简写边框:

• border-color
• border-style (required)
• border-width

举例说明:

border:4px solid green;