第五十四章边框-易看设计 - 专业设计师平台

背景就像是盒子的底部，而边框就是盒子的四壁。对的，我们是在顶部俯视这个盒子，妥妥的上帝视角，诶，开森~

边框属性 border 也是一个复合属性，也叫快捷属性。道理很简单，首先盒子有四个边，然后边框有粗细、样式、颜色等属性需要设置。

先来个简单一点的：

<div id="border-box"></div>

#border-box {width: 100%;height: 100px;border: 2px solid black;}

然后就获得了上面的方框，那么我们也可以猜出 border: 后面的 2px 说的是边框的粗细，black 说的是颜色。那中间的 solid 说的是边框的样式，这个表示实线。这种方式是四个边一起设置，很简单，现在我们只需要了解几种不同的边框样式，就可以应付大多数情况了。

边框样式 `border-style`

如果把边框的样式单独出来，就是这个属性。它的取值可以是：

none：不显示边框
hidden：不显示边框，但是 none 的优先级最低，hidden 的优先级最高
dotted：显示为一系列圆点。
dashed：显示为一系列短的方形虚线。
solid：显示为一条实线。
double：显示为一条双实线。
groove：显示为有雕刻效果的边框，样式与 ridge 相反。
ridge：显示为有浮雕效果的边框，样式与 groove 相反。
inset：显示为有陷入效果的边框，样式与 outset 相反。
outset：显示为有突出效果的边框，样式与 inset 相反。

说得多清楚，就是读着跟绕口令似的，所以还是动手试试比较好。不过其实也没必要记住，比如我唯一会写的单词就是 solid，日常够用了，其他需要的时候再查吧。

边框宽度 `border-width`

就是边框的粗细。反正前面学过的单位你都可以试试，试试不要钱，嘻嘻。还可以使用下面三个关键词：

thin：细边框
medium：中等边框
thick：粗边框

然而，标准中并没有定义这三个关键词具体是多宽，所以在对粗细要求很宽泛的时候可以使用。反正我们记英文单词都觉得很累，估计就没什么人喜欢去用。

边框颜色 `border-color`

这个不讲了，反正你们也知道是怎么回事。

这都不是重点。

一个复合属性，展开而已，这有什么呢。但是我们说边框有四个方向呢，我们现在都是四个方向一起说，也就是说……这还是复合属性。再展开：

* {border-top-width: 2px;border-right-width: 2px;border-bottom-width: 2px;border-left-width: 2px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-top-style: black;border-right-style: black;border-bottom-style: black;border-left-style: black;}

这才是完整的写法，可真的是教人头大。一般没人这么写，除非想要细致的控制某个属性。但是你得知道这事。

这还不是重点，这些很简单，我一说你就明白了。一点都不难，只是繁琐而已。

繁琐……程序员可能忍受繁琐么，绝无可能！

border-width: 1px 3px 6px 9px;

一句话，指定四个边，简洁大方，多好！你问我每个值代表哪个方向？试试吧~

很容易看出，这是上右下左的顺序……可是这不好记忆啊！超简单的，想象一下指针的表，从十二点开始，转一圈，就是这个顺序，这叫做顺时针方向……（别打，我知道是小学的概念，这不是为了证明写代码不难么

好好，其他两个属性也可以这么写，但是 border 这个属性不行，它只能按本章最前面那样去写。

简单吧，马上就记住了吧。你看写一个值就代表全部，写四个值就代表四个边分别设置。那我写两个值的话……其实这种东西不应该我讲，动手试试马上就知道了