027_CSS边框
1. 元素的边框(border)是围绕元素内容和内边距的一条或多条线。
2. CSS border属性允许你规定元素边框的样式、宽度和颜色。
3. CSS边框属性
4. 边框与背景
4.1. CSS规范指出, 边框绘制在"元素的背景之上"。这很重要, 因为有些边框是"间断的"(例如, 点线边框或虚线框), 元素的背景应当出现在边框的可见部分之间。
4.2. CSS2.1指出: 元素的背景是内容、内边距和边框区的背景。
5. 边框的样式
5.1. border-style属性用于设置元素所有边框的样式, 或者单独地为各边设置边框样式。
5.2. 只有当这个值不是none时边框才可能出现。
5.3. border-style属性是按照上、右、下、左的顺序来进行边框样式设置的, 遵从和内边距一样的值复制规则。
5.4. 默认值
5.5. 可能的值
5.6. 单边框样式
- border-top-style: 设置上边框的样式。
- border-right-style: 设置右边框的样式。
- border-bottom-style: 设置下边框的样式。
- border-left-style: 设置左边框的样式。
5.7. 例子
5.7.1. 代码
<!DOCTYPE html> <html><head><title>边框的样式</title><meta charset="utf-8" /><style type="text/css">p {width: 650px; background-color: orange;}#p1 {border-style: dotted;}#p2 {border-style: dashed;}#p3 {border-style: solid;}#p4 {border-style: double;}#p5 {border-style: groove;}#p6 {border-style: ridge;}#p7 {border-style: inset;}#p8 {border-style: outset;}#p9 {border-style: dotted none dashed hidden;}#p10 {border-top-style: solid;border-right-style: none;border-bottom-style: double;border-left-style: groove;}img {border-style: outset;}</style></head><body><p id="p1">border-style 属性, dotted值: 定义点状边框。在大多数浏览器中呈现为实线。</p><p id="p2">border-style 属性, dashed值: 定义虚线。在大多数浏览器中呈现为实线。</p><p id="p3">border-style 属性, solid值: 定义实线。</p><p id="p4">border-style 属性, double值: 定义双线。双线的宽度等于 border-width 的值。</p><p id="p5">border-style 属性, groove值: 定义3D凹槽边框。其效果取决于border-color的值。</p><p id="p6">border-style 属性, ridge值: 定义3D垄状边框。其效果取决于border-color的值。</p><p id="p7">border-style 属性, inset值: 定义3D inset边框。其效果取决于border-color的值。</p><p id="p8">border-style 属性, outset值: 定义3D outset边框。其效果取决于border-color的值。</p><p id="p9">border-style属性,hidden值:与"none"相同。不过应用于表时除外,对于表hidden用于解决边框冲突。</p><p id="p10">border-style 属性, none值: 定义无边框。</p><img src="btn.png" /></body> </html>5.7.2. 效果图
6. 边框的宽度
6.1. border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
6.2. 只有当边框样式不是none时才起作用。如果边框样式是none, 边框宽度实际上会重置为0。不允许指定负长度值。
6.3. border-width属性是按照上、右、下、左的顺序来设置边框宽度的, 遵从和内边距一样的值复制规则。
6.4. 默认值
6.5. 可能的值
6.6. 单边框宽度
- border-top-width: 设置上边框的宽度。
- border-right-width: 设置右边框的宽度。
- border-bottom-width: 设置下边框的宽度。
- border-left-width: 设置左边框的宽度。
6.7. 例子
6.7.1. 代码
<!DOCTYPE html> <html><head><title>边框的宽度</title><meta charset="utf-8" /><style type="text/css">p {width: 700px;background-color: orange;border-style: dotted;}#p1 {border-width: thin;}#p2 {border-width: medium;}#p3 {border-width: thick;}#p4 {border-width: 15px 10px 5px 8px;}#p5 {border-top-width: 15px;border-right-width: 10px;border-bottom-width: 5px;border-left-width: 8px;}</style></head><body><p id="p1">border-width 属性, thin值: 定义细的边框。</p><p id="p2">border-width 属性, medium值: 默认。定义中等的边框。</p><p id="p3">border-width 属性, thick值: 定义粗的边框。</p><p id="p4">border-width 属性, length允许您自定义边框的宽度。</p><p id="p5">定义单边宽度:border-top-width border-right-width border-bottom-width border-left-width</p></body> </html>6.7.2. 效果图
7. 边框的颜色
7.1. border-color简写属性为元素四条边框设置颜色。
7.2. border-color属性是按照上、右、下、左的顺序来设置边框颜色的。
7.3. 默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色, 它将与元素的文本颜色相同。另一方面, 如果元素没有任何文本, 假设它是一个表格, 其中只包含图像, 那么该表的边框颜色就是其父元素的文本颜色(因为color可以继承)。
7.4. 默认值
7.5. 可能的值
7.6. 定义单边颜色
- border-top-color: 设置上边框的颜色。
- border-right-color: 设置右边框的颜色。
- border-bottom-color: 设置下边框的颜色。
- border-left-color: 设置左边框的颜色。
7.7. 例子
7.7.1. 代码
<!DOCTYPE html> <html><head><title>边框的颜色</title><meta charset="utf-8" /><style type="text/css">p {width: 700px;background-color: orange;border-style: dotted;}#p1 {border-color: blue;}#p2 {border-color: blue rgb(25%,35%,45%) #909090 red;}#p3 { border-top-color: blue;border-right-color: rgb(25%,35%,45%);border-bottom-color: #909090;border-left-color: red;}</style></head><body><p id="p1">border-color属性设置四条边框的颜色。此属性可设置1到4种颜色。</p><p id="p2">可以使用任何类型的颜色值, 例如可以是命名颜色, 也可以是十六进制和RGB值</p><p id="p3">定义单边颜色: border-top-color border-right-color border-bottom-color border-left-color</p></body> </html>7.7.2. 效果图
8. 上边框
8.1. border-top简写属性把上边框的所有属性设置到一个声明中。
8.2. 可以按顺序设置如下属性:
- border-top-width
- border-top-style
- border-top-color
9. 右边框
9.1. border-right简写属性把右边框的所有属性设置到一个声明中。
9.2. 可以按顺序设置如下属性:
- border-right-width
- border-right-style
- border-right-color
10. 下边框
10.1. border-bottom简写属性把下边框的所有属性设置到一个声明中。
10.2. 可以按顺序设置如下属性:
- border-bottom-width
- border-bottom-style
- border-bottom-color
11. 左边框
11.1. border-left简写属性把左边框的所有属性设置到一个声明中。
11.2. 可以按顺序设置如下属性:
- border-left-width
- border-left-style
- border-left-color
12. 边框
12.1. border简写属性在一个声明设置所有的边框属性。
12.2. 可以按顺序设置如下属性:
- border-width
- border-style
- border-color
12.3. 例子
12.3.1. 代码
<!DOCTYPE html> <html><head><title>边框</title><meta charset="utf-8" /><style type="text/css">#p1 {border-top: thin dotted #ff0000;border-right: medium dashed green;border-bottom: thick solid rgb(122, 127, 255);border-left: 10px groove rgb(25%,35%,45%);}#p2 {border: 1em ridge pink;}</style></head><body><p id="p1">border-top简写属性把上边框的所有属性设置到一个声明中。border-right简写属性把右边框的所有属性设置到一个声明中。border-bottom简写属性把下边框的所有属性设置到一个声明中。border-left简写属性把左边框的所有属性设置到一个声明中。</p><p id="p2">border简写属性在一个声明设置所有的边框属性。</p></body> </html>12.3.2. 效果图
总结
- 上一篇： 026_CSS内边距
- 下一篇： 028_CSS外边距