第十讲：元素边框

本讲起，我们暂时从艰涩的JS中走出来，集中学习一些做帖子无法回避的CSS知识与技能。这些会比JS容易得多，不过就是有些繁琐。不论如何，接下来的几个讲义要讨论的东东，要求不同于JS能读懂、做简单修改那么低，它们应被充分理解和掌握。本节专门讲CSS边框，border。

border 属性隶属于CSS范畴，用来制定HTML元素的边框样式。border属性实际上由一系列的 border-* 属性组成，常用的有 border-style（边框样貌）、border-width（边框厚度）、border-color（边框颜色）、border-radius（边框角半径），还有其他的。试看如下的 .mybox {} 选择器代码：

.mybox {
	width: 600px;
	height: 260px;
	border-style: solid; /* 实线样式 */
	border-width: 8px; /* 8像素厚度 */
	border-color: red; /* 红色 */
}

其中，边框的样貌还可以是 dashed（虚线）、dotted（圆点）、double（双线）、groove（雕刻）、ridge（浮雕）、inset（凹陷）、outset（凸起）、hidden（隐藏）、none（无）等，还是挺丰富的；厚度除了实体数值，还有关键字 thick（厚）、thin（薄）可用；颜色支持任何一种浏览器支持的颜色表达法。这些属性独立使用时都支持多值设置，后面会谈到。

可以使用语法糖简写方式书写border属性。下面的写法，运行效果与上面的写法同：

.mybox {
	width: 600px;
	height: 260px;
	border: 8px solid red; /* 此句包含了边框的厚度+样式+颜色 */
}

但语法糖写法仅支持各属性的单值设置，当我们需要给不同的边框设置不同的颜色、样式、厚度时，最好还是一个一个地写 border-* 属性，试看代码和效果：

<style>
/* border-* 属性四个值对应的边框顺序 ：上右下左 */
.mybox {
	width: 600px;
	height: 260px;
	border-color: red green blue cyan; /* 颜色 */
	border-style: solid dotted dashed groove; /* 长相 */
	border-width: 3px 6px 12px 8px; /* 厚度 */
}
</style>

<div class="mybox"></div>

点击查看效果

border-* 属性的设置支持单值和多值。单一值时，四条边框一样；双值时，上和下使用第一个值、左和右使用第二个值；三个值时，上用第一个值，左和右用第二个值，下用第三个值；四个值时，按上右下左的顺序依次使用四个值。

元素的四个角默认是尖角，我们可以通过 border-radius 设置圆角半径。圆角半径可以使用px值，也可以使用百分比。以下示例，我们给 id="mybox" 的元素设置了 10px 的圆角半径，注意观察元素四个角的效果：

<style>
#mybox {
	width: 600px;
	height: 260px;
	border: thick groove green;
	border-radius: 10px;
}
</style>

<div id="mybox"></div>

点击查看效果

如果元素的宽高一致，当 border-radius 的值设为单值 50% 或 100% 都会得出圆形的形状，但是，当 border-radius 是多值时只有所有值都设为 50% 或宽高像素尺寸的一半时才得到圆形。以下代码使用四个值设置四个角的圆角半径，试分析代码然后查看效果：

<style>
#mybox1 {
	width: 300px;
	height: 300px;
	border: 2px groove cyan;
	border-radius: 0 50% 0 100%; /* 值为 0 时可以省略单位符号 */
}
</style>

<div id="mybox1"></div>

点击查看效果

border-radius属性多值时，两个值的，左上和右下使用第一个值，右上和左下使用第二个值；三个值的，左上使用第一个值，右上、左下使用第二个值，右下使用第三个值；四个值则按左上、右上、右下、左下依次使用四个值。取值顺序可能会让人一时半会儿找不着北，但这和和上右下左有联系，border-radius针对的是角，所以从左上开始。

顺便提一下，border-radius还有最多8个值的，这样它完全可以设置出奇形怪状的元素，感兴趣且有余力的童鞋可以去搜一搜。

请特别注意，border-radius 属性不依赖于border边框的有无，即，即使元素没有边框，元素也一样执行 border-radius 属性的设置。

本节主要讲 border 和 border-radius 两个属性，二者有联系但彼此独立。border 是纯边框层面的CSS属性，它由 border-* 诸多属性组成，用于设置HTML元素的边框；border-radius 是元素四个角的圆角半径，不设置边框属性的元素如果设置了 border-radius 属性圆角设置一样生效。两者都支持多属性值，请特别留意多值时对应边框和角的取值次序。

作业：制作一个有浮雕边框效果（ridge）的 400*200 的元素，要求边框颜色为浅绿色（lightgreen），厚度为10px，左上角和右下角不需要圆角、右上角和左下角圆角半径为30px。

返回目录