边框相关属性
知有
268
边框相关属性用于设置目标对象的边框特征，包括边框颜色、粗细，以及使用的线型。边框相关属性有如下几个：
- border: 这是一个复合属性，用于设置目标组件的边框样式。可同时设置边框的粗细、线型、颜色。
- border-color: 用于设置组件的边框颜色。如果提供4 个参数值，则将按上、右、下、左的顺序一次设置4 个边框的颜色；如果只提供1 个参数值，则将用于设置4 个边框的颜色；如果提供2 个参数值，则第一个用于设置上、下两个边框的颜色；第二个用于设置左、右两个边框的颜色；如果提供3 个参数值，则第一个用于设置上边框的颜色，第二个用于设置左、右两个边框的颜色，第三个用于设置下边框的颜色。
- border-style: 用于设置组件的边框线型。方式与border-color相同。
- border-width: 用于设置目标组件的边框线宽。
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 凸出边框。
CSS3 提供的渐变边框
CSS3 提供了如下4 个属性来支待渐变边框。
- border-top-colors: 该属性用于设置目标组件的上边框颜色。如果设置上边框的宽度是Npx, 那么就可以为该属性设置N 种颜色，每种颜色显示1px 的宽度。但如果设置的颜色数量小于边框的宽度，那么最后一个颜色将会覆盖该边框剩下的宽度。假如边框的宽度是10px, 如果该属性只声明了5 或6 种颜色，那么最后一个颜色将会覆盖该边框剩下的宽度。
- border-right-colors: 该属性用于设置目标组件的右边框颜色。该属性指定的多个颜色值的意义与border-top-colors 属性里各颜色值的意义相同。
- border-bottom-colors: 该属性用于设置目标组件的下边框颜色。该属性指定的多个颜色值的意义与border-top-colors 属性里各颜色值的意义相同。
- border-left-colors: 该属性用于设置目标组件的左边框颜色。该属性指定的多个颜色值的意义与border-top-colors 属性里各颜色值的意义相同。
CSS3提供的圆角边框
CSS3 为支待圆角边框提供了如下属性。
border-radius: 该属性用于指定圆角边框的圆角半径（半径越大，圆角的程度越大）。如果该属性指定1个长度，则4个圆角都使用该长度作为半径；如果指定2个长度，则第一个长度将作为左上角、右下角的半径；第二个长度将作为右上角、左下角的半径；如果指定3个长度，则第一个长度将作为左上角的半径，第二个长度将作为右上角、左下角的半径； 第三个长度将作为右下角的半径。
- border-top-left-radius: 该属性用于指定左上角的圆角半径。
- border-top-right-radius: 该属性用于指定右上角的圆角半径。
- border-bottom-right-radius: 该属性用于指定右下角的圆角半径。
- border-bottom-left-radius: 该属性用于指定左下角的圆角半径。