^_^

上一篇我分享了一下有关background的，今天我们来一起解析一下border，看看border有哪些样式。。。

对边框进行样式的设置时，你第一想到的可能就是边框颜色是什么色，宽度是多宽，有什么样的边框。那我们就按这样的顺序进行一一的分析。

1、border-color

顾名思义，可以看出是设置边框border的颜色

上一篇写到background-color，你也许会想到border-color是不是也和background-color一样具有三种属性值，bingo，它也具备一样的三种属性值，那来让我们一起去看一下吧！！！

• 主要介绍以下三种边框色属性值

可以为英语代码，例如：

div{
    width:50px;
    height:50px;
    border-style:solid;//边框为实线，在下面我们会了解到
    border-color:red;
}
结果：一个宽和高都为50px的且带有红色的实线边框方块

可以为16进制颜色码，例如：

border-color:#000;

可以为rgb格式：

border-color:rgb(225,182,193);
其中，r代表red红色，g代表green绿色，b代表blue蓝色。

注意:

1、border-color有默认值:

默认颜色值是字体颜色，默认的字体颜色是黑色

2、border-color可以分方向的设置边框色

border-left-color:;//左边框
border-top-color:;//上边框
border-right-color:;//右边框
border-bottom-color:;//下边框

3、border-color也可以有多个属性值

border:red;//边框的四个方向都为red
border:red blue;//上下边框为red，左右边框为blue
border:red green blue;//上边框为red，左右边框为green，下边框为blue
border:red green blue yellow;//上边框为red，右边框为green，下边框为blue，左边框为yellow

2、border-width

在设置border-width时你可能会问：“border-width和border-color一样有多个属性值写法吗？”，这次可能让你失望了，border-width是没有的，它只有数值这一种。。。

• 边框宽度属性值

为数值，例如：

div{
    width:50px;
    height:50px;
    border-style:solid;//边框为实线，在下面我们会了解到
    border-width:2px;//边框的宽度为2像素
}
结果是一个宽和高都为50px，带有2px实线边框的方框

注意:
1、border-width有默认值:

默认值为3px

2、border-width的属性值不能为负数

3、border-width和border-color是一样可以分方向进行设置，而且规则是一样的，在这里就不过多的解释了

3、border-style

我们主要介绍一下比较常见的一些边框样式

常用的：

solid:实线
dotted:点状线
dashed:虚线

不常用：

double:双实线
groove:3D凹槽，有兼容性问题，火狐支持的很好
inset:左上
outset:右下
ridge:3D垄状边框，有兼容性问题，火狐支持的很好

例如：

div{
    width:50px;
    height:50px;
    border-style:solid;
}
结果是一个宽和高都为50px，带有实线边框的方框

注意:
1、border-style没有默认的样式，如果不进行border-style的设置，将不会看到边框

2、border-style和border-color也是一样可以分方向进行设置，而且规则也是一样的，在这里也就不过多的解释了

border和background一样，也是有复合写法的，那让我们一起了解一下border的复合写法吧！！！

4、border的复合写法

border:border-color border-width border-style
没有固定的书写顺序，可以任意排列。

例如：

border: 1px red solid;//宽度为1px，颜色为red的实线边框