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

边框属性 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 这个属性不行,它只能按本章最前面那样去写。

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


border-width: 1px 9px;

哦,第一个值表示上下边,第二个值表示左右边,也挺合理的。那如果三个值呢……


border-width: 1px 9px 12px;

第一个值是上边,第三个值是下边,中间的值是左右。其实有点从上到下意思。

这种设置方式对于以后涉及四个方向的属性都有用,所以,看两遍,试两遍,好好记住哦~

【本章助记卡片:卡片 for 第五十四章