CSS 简明教程 - 边框属性
我们可以使用 CSS 边框属性来设置 HTML 元素的边框颜色，边框样式和边框宽度
有三种常见的 CSS 边框属性
| 属性 | 说明 |
|---|---|
| border-color | 设置边框的颜色 |
| border-style | 设置边框的样式，可选值有 solid、dashed、double 等 |
| border-width | 设置边框的宽度 |
边框样式 border-style
我们可以使用 border-style 属性来定义 HTML 元素的边框样式，它是三个边框属性中最重要的一个
border-style 属性定义了 10 种不同的 非继承样式，包括 none
| 样式 | 说明 |
|---|---|
| none | 定义无边框 |
| hidden | 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突 |
| dotted | 定义点状边框。在大多数浏览器中呈现为实线 |
| dashed | 定义虚线。在大多数浏览器中呈现为实线 |
| solid | 定义实线 |
| double | 定义双线。双线的宽度等于 border-width 的值 |
| groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值 |
| ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值 |
| inset | 定义 3D inset 边框。其效果取决于 border-color 的值 |
| outset | 定义 3D outset 边框。其效果取决于 border-color 的值 |
| inherit | 规定应该从父元素继承边框样式 |
border-style 属性可以有一到四个值 ( 对于 顶部边框，右边框，底部边框和 左边框 )
下面的代码是一个完整的例子
p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;}
边框宽度 border-width
我们可以使用 CSS border-width 属性来定义 HTML 元素的边框宽度
指定宽度有两种方法
- 指定长度值，例如
2px或0.1em( 以px，pt，cm，em等为单位 ) - 使用关键字，例如
thick，medium( 默认 ) 和thin
注意：由于关键字 thick，medium 和 thin 没有指定特定的宽度值，因此不同的浏览器可能会显示不同的宽度
你可以使用不同的浏览器尝试以下示例
p.one { border-style: solid; border-width: 5px; } p.two { border-style: solid; border-width: medium; } p.three { border-style: solid; border-width: 2px 10px 4px 20px; }
你可以按照 上-右-下-左 的顺序设置元素边框的每一边
p { border-style: solid; border-width: 15px 5px 15px 5px; }
当然，上面的示例也可以简写为
p { border-style: solid; border-width: 15px 5px; }
你还可以使用以下属性分别设置边框每边的宽度
因此，上面的示例又可以改写为
p { border-style: solid; border-top-width: 15px; border-right-width: 5px; border-bottom-width: 15px; border-left-width: 5px; }
边框颜色 border-color
我们可以使用 border-color 属性来设置 HTML 元素的边框四边的颜色
我们可以使用任何类型的颜色值，例如颜色名称，十六进制值和 RGB 值作为 border-color 属性的值
我们同样可以按照 上-右-下-左 的顺序为元素设置边框每一边的颜色
p { border-style: solid; border-color: blue rgb(25%,35%,45%) #909090 red; }
我们还可以使用下面的属性分别设置边框每侧的颜色
例如，如果我们要为 <h1> 元素指定纯黑色边框，但右侧是纯红色，那么我们可以像这样定义 CSS 规则
h1 { border-style: solid; border-color: black; border-right-color: red; }
CSS 边框属性 - 简写属性
在上面的例子中，我们了解了可以用来设置 HTML 元素的边框的三个 CSS 边框属性，为了简写代码，我们可以将这三个属性整合到一个属性 border 中，例如
p { border: 5px solid red; }
我们还可以使用简写属性来定义每个边框的样式，例如，我们可以像这样定义左侧边框
p { border-left: 6px solid red; background-color: lightgrey; }
我们还可以以同样的方式定义右侧边框，顶部边框和底部边框的样式
边框圆角属性 border-radius
border-radius 属性在 CSS3 中定义，它可以用来实现圆角边框
例如
p { border: 2px solid red; border-radius: 5px; }
但是，border-radius 属性并不被所有的浏览器支持，一些老旧的浏览器，如 ( IE6,7,8及更早版本 ) ，除此之外，所有的现代浏览器都支持 border-radius 属性
