一、 border-style 属性
`border-style` 属性定义了边框的样式。CSS 提供了多个样式用于定义边框,其值可以是:`solid`、`dotted`、`dashed`、`double`、`groove`、`ridge`、`inset`、`outset`。下面我们来举例说明:.class { border-style: solid; } .class1 { border-style: dashed; } .class2 { border-style: outset; }
与此类似,您还可以使用 `border-top-style`、`border-right-style`、`border-bottom-style` 和 `border-left-style` 属性分别给元素的上、右、下、左边添加不同的样式边框。
二、 border-width 属性
`border-width` 属性定义边框的宽度。可取值为:像素(px)、百分比(%)或其它固定的长度计量单位。下面是一个例子:.class { border-style: solid; border-width: 2px; } .class1 { border-style: dashed; border-width: 4px 1px 3px 5px; }
此外,您还可以使用 `border-top-width`、`border-right-width`、`border-bottom-width` 和 `border-left-width` 属性分别给元素的上、右、下、左边的宽度设置不同的值。
三、 border-color 属性
`border-color` 属性定义边框的颜色。下面是一个例子:.class { border-style: solid; border-color: red; border-width: 2px; } .class1 { border-style: dashed; border-color: #000000; border-width: 1px; }
在这个例子中,`.class` 的边框将是2像素宽的红色边框,而 `.class1` 的边框将是1像素宽的黑色虚线边框。
四、 border-radius 属性
`border-radius` 属性可以给HTML元素的角落增加一些弧形。另外,设置 `border-radius` 还可以改变视觉上所有边缘的外观。下面是一个例子:.class { border-radius: 10px; } .class1 { border-radius: 50%; }
在上面的例子中,`.class` 设置一个10像素的边角半径,这意味着元素的边角将以10像素的大小进行渲染。`.class1` 将边角设置为一个半径长度等于边框框架高度的50%。
五、border-image 属性
`border-image` 属性可以使得边框由图片创建而成。下面是一个例子:.class { border-image-source: url(border.png); border-image-slice: 30 24 24 30; border-image-width: 30px 24px 24px 30px; border-image-outset: 0 0 0 0; border-image-repeat: round; }
在上面的例子中,`.class` 边框将被设置为一个由图片 `border.png` 创建而成的四个部分。`border-image-slice` 指定了图片中边框的四个切片。`border-image-width` 指定了边框每个切片的宽度。`border-image-outset` 将边框从其容器矩形的内侧扩展开来,并覆盖一些将要呈现的内容。`border-image-repeat` 指定了如何重复边框图像,可以是 `stretch`、`repeat` 或 `round`(启用扩展)。
六、边框及其它CSS属性
通过了解CSS `border`属性,我们可以创建和控制鲜艳、有趣、具有个性的页面。但是用于边框的CSS属性只是其中的一部分。我们还可以用 CSS 定义文本的 `font-size`、`color`,以及其他 CSS 属性,来控制 HTML 中的背景、元素、文本和链接。 这里还提供一些额外使用的CSS属性,可以使得样式更加丰富:- `box-shadow` 设置元素的阴影效果;
- `text-shadow` 设置文本的阴影效果;
- `opacity` 定义元素的透明度。