边框相关属性
边框相关属性用于设置目标对象的边框特征，包括边框颜色、粗细，以及使用的线型。边框相关属性有如下几个。
➢ border：这是一个复合属性，用于设置目标组件的边框样式。可同时设置边框的粗细、线型、颜色。
➢ border-color：用于设置组件的边框颜色。如果提供4个参数值，则将按上、右、下、左的顺序一次设置4个边框的颜色；如果只提供1个参数值，则将用于设置4个边框的颜色；如果提供2个参数值，则第一个用于设置上、下两个边框的颜色；第二个用于设置左、右两个边框的颜色；如果提供3个参数值，则第一个用于设置上边框的颜色，第二个用于设置左、右两个边框的颜色，第三个用于设置下边框的颜色。
➢ border-style：用于设置组件的边框线型。如果提供4个参数值，则将按上、右、下、左的顺序依次设置4个边框的线型；如果只提供1个参数值，则将用于设置4个边框的线型；如果提供2个参数值，则第一个用于设置上、下两个边框的线型，第二个用于设置左、右两个边框的线型；如果提供3个参数值，则第一个用于设置上边框的线型，第二个用于设置左、右两个边框的线型，第三个用于设置下边框的线型。
➢ border-width：用于设置目标组件的边框线宽。如果提供4个参数值，则将按上、右、下、左的顺序依次设置4个边框的线宽；如果只提供1个参数值，则将用于设置4个边框的线宽；
如果提供2个参数值，则第一个用于设置上、下两个边框的线宽，第二个用于设置左、右两个边框的线宽；如果提供3个参数值，则第一个用于设置上边框的线宽，第二个用于设置左、右两个边框的线宽，第三个用于设置下边框的线宽。
➢ border-top：这是一个复合属性，用于设置目标组件的上边框样式。可同时设置边框的粗细、线型、颜色。
➢ border-top-color：用于设置目标组件的上边框颜色。
➢ border-top-style：用于设置目标组件的上边框线型。
➢ border-top-width：用于设置目标组件的上边框线宽。
➢ border-right：这是一个复合属性，用于设置目标组件的右边框样式。可同时设置边框的粗细、线型、颜色。
➢ border-right-color：用于设置目标组件的右边框颜色。
➢ border-right-style：用于设置目标组件的右边框线型。
➢ border-right-width：用于设置目标组件的右边框线宽。
➢ border-bottom：这是一个复合属性，用于设置目标组件的下边框样式。可同时设置边框的粗细、线型、颜色。
➢ border-bottom-color：用于设置目标组件的下边框颜色。
➢ border-bottom-style：用于设置目标组件的下边框线型。
➢ border-bottom-width：用于设置目标组件的下边框线宽。
➢ border-left：这是一个复合属性，用于设置目标组件的左边框样式。可同时设置边框的粗细、线型、颜色。
➢ border-left-color：用于设置目标组件的左边框颜色。
➢ border-left-style：用于设置目标组件的左边框线型。
➢ border-left-width：用于设置目标组件的左边框线宽。
在上面的边框相关属性中，边框颜色可以是任何有效的颜色值，而线宽可以是任何有效的长度值，线型可以支持如下值。
➢ none：无边框。
➢ hidden：隐藏边框。
➢ dotted：点线边框。
➢ dashed：虚线边框。
➢ solid：实线边框。
➢ double：双线边框。
➢ groove：3D凹槽边框。
➢ ridge：3D凸槽边框。
➢ inset：3D凹入边框。
➢ outset：3D凸出边框。
虽然提供了这么多线型，但不是每个浏览器中都可以看出全部线型的效果。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>边框相关属性测试</title>
<style type="text/css">
/* 设置div元素的宽度和高度 */
div {
width:300px;
height:40px;
}
</style>
</head>
<body>
border:5px solid #666
<div style="border:5px solid #666">
宽度为5的灰色实线边框</div>
border:2px dashed #666
<div style="border:2px dashed #666">
宽度为2的灰色虚线边框</div>
border:2px dotted #666
<div style="border:2px dotted #666">
宽度为2的灰色点线边框</div>
border:5px groove #666
<div style="border:5px groove #666">
宽度为5的灰色凹槽边框</div>
border:8px inset #666
<div style="border:8px inset #666">
宽度为8的灰色的凹入边框</div>
border:8px outset #666
<div style="border:8px outset #666">
宽度为8的灰色的凸出边框</div>
border-width:8px 2px;border-style:solid dashed;border-color:#ccc #444;
<div style="border-width:8px 2px;border-style:solid dashed;
border-color:#ccc #444;">
上下两条边框样式为：8px solid #ccc;<br/>
左右两条边框样式为：2px dashed #444</div>
border-width:3px;border-style:solid;border-color:#ccc #ccc #444 #444;
<div style="border-width:8px;border-style:solid;
border-color:#ccc #ccc #444 #444;">
让四条边框颜色不同作出的立体效果</div>
</body>
</html>
CSS 3提供的渐变边框
CSS 3提供了如下4个属性来支持渐变边框。
➢ border-top-colors：该属性用于设置目标组件的上边框颜色。如果设置上边框的宽度是Npx，那么就可以为该属性设置N种颜色，每种颜色显示1px的宽度。但如果设置的颜色数量小于边框的宽度，那么最后一个颜色将会覆盖该边框剩下的宽度。假如边框的宽度是10x，如果该属性只声明了5或6种颜色，那么最后一个颜色将会覆盖该边框剩下的宽度。
➢ border-right-colors：该属性用于设置目标组件的右边框颜色。该属性指定的多个颜色值的意义与border-top-colors属性里各颜色值的意义相同。
➢ border-bottom-colors：该属性用于设置目标组件的下边框颜色。该属性指定的多个颜色值的意义与border-top-colors属性里各颜色值的意义相同。
➢ border-left-colors：该属性用于设置目标组件的左边框颜色。该属性指定的多个颜色值的意义与border-top-colors属性里各颜色值的意义相同。
需要指出的是，这4个属性目前只有Firefox浏览器才支持，而且使用该属性时必须在前面增加-moz-前缀。如下页面代码示范了CSS 3提供的渐变边框效果。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 渐变边框 </title>
<style type="text/css">
/* 设置div元素的宽度和高度 */
div {
width:300px;
height:40px;
}
</style>
</head>
<body>
<div style="border:10px solid white;
-moz-border-bottom-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc #ddd #eee;
-moz-border-top-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc #ddd #eee;
-moz-border-left-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc #ddd #eee;
-moz-border-right-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc #ddd #eee;">
宽度为10的渐变边框</div>
</body>
</html>
CSS 3提供的圆角边框
CSS 3为支持圆角边框提供了如下属性。
border-radius：该属性用于指定圆角边框的圆角半径（半径越大，圆角的程度越大）。如果该属性指定1个长度，则4个圆角都使用该长度作为半径；如果指定2个长度，则第一个长度将作为左上角、右下角的半径；第二个长度将作为右上角、左下角的半径；如果指定3个长度，则第一个长度将作为左上角的半径，第二个长度将作为右上角、左下角的半径；第三个长度将作为右下角的半径。
➢ border-top-left-radius：该属性用于指定左上角的圆角半径。
➢ border-top-right-radius：该属性用于指定右上角的圆角半径。
➢ border-bottom-right-radius：该属性用于指定右下角的圆角半径。
➢ border-bottom-left-radius：该属性用于指定左下角的圆角半径。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 渐变边框 </title>
<style type="text/css">
/* 设置div元素的宽度和高度 */
div {
width:300px;
height:60px;
}
</style>
</head>
<body>
<div style="border:3px solid black;border-radius:20px;">
半径为20px的圆角边框</div>
<div style="border:3px dotted black;border-radius:20px;">
半径为20px的圆角边框</div>
<div style="background-color:#aaa;border-radius:20px;">
半径为20px的圆角边框（不显示边框）</div>
<div style="border:3px solid black;border-radius:16px 40px;">
半径为16px 40px的圆角边框</div>
<div style="border:3px solid black;border-radius:10px 20px 40px;">
半径为10px 20px 40px;的圆角边框</div>
<div style="border:3px solid black;border-radius:10px 20px 30px 40px;">
半径为10px 20px 30px 40px的圆角边框</div>
<div style="border:3px solid black;
border-top-left-radius:30px;
border-top-right-radius:20px;
border-bottom-right-radius:40px;
border-bottom-left-radius:10px;">
分开指定4个角的半径</div>
</body>
</html>
注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。