1. 概述
A. 任何块元素和行内元素都可以设置边框
B. 如果元素要显示边框,必须同时设置以下三个属性才可以:border-width(边框宽度)、border-style(外观)、border-color(边框颜色)。
2. border-width(边框宽度)
A. 该属性值要设置为像素值,即xxpx(20px等)。
3. border-style(外观)
A. 该属性可以取以下值:
none:无样式
hidden:与“none”相同
solid:实线
dashed:虚线
dotted:点线
double:双线,双线的宽度加上中间的空隙宽度等于border-width值
inset:内凹(3D样式)
outset:外凸(3D样式)
ridge:脊线(3D样式)
groove:槽线(3D样式)
B. 除了solid和dashed,其他取值都不常用
4. border-color
A. 该属性值可以设置为关键字(red、green等),也可以设置为rgb数值(#3EF0A4)。
e.g. <head>
<title>边框</title>
<style type="text/css">
input {
border-width: 6px;
border-style: solid;
border-color: red;
}
</style>
</head>
<body>
<input type="button" value="点击一下" />
</body>
5. 边框的简洁写法
e.g. <head>
<title>边框</title>
<style type="text/css">
input {
/* border-width、border-style和border-color这三个属性不分顺序 */
border: green 6px solid;
}
</style>
</head>
<body>
<input type="button" value="点击一下" />
</body>
6. 边框局部样式
A. 指上边框、下边框、左边框和右边框的样式。
B. border-top/bottom/left/right-width、border-top/bottom/left/right-style、border-top/bottom/left/right-color。
C. 简洁写法为border-top/bottom/left/right