第2章-CSS基础重点.ppt

2.5.2 设置边框 border-color属性是用来控制边框显示的颜色，和边框宽度、边框样式的设置方法一样，既可以统一设置，也可以分别设置每个边框的颜色。 基本语法： border-color: 颜色关键字 | RGB值 //以下为单独设置 border-top-color: 颜色关键字 | RGB值 border-bottom-color: 颜色关键字 | RGB值 border-left-color: 颜色关键字 | RGB值 border-right-color: 颜色关键字 | RGB值 3. border-color边框色彩属性 2.5.2 设置边框 在CSS中，border属性用来同时设置边框的样式、宽度和颜色，也可以另外对每个边界属性单独进行设置。 基本语法： border:边框宽度 | 边框样式 | 边框颜色 border-top:上边框宽度 | 上边框样式 | 上边框颜色 border-bottom:下边框宽度 | 下边框样式 | 下边框颜色 border-left:左边框宽度 | 左边框样式 | 左边框颜色 border-right:右边框宽度 | 右边框样式 | 右边框颜色 4. border属性的综合设置 2.5.2 设置边框 语法说明：每一个属性都是一个复合属性，都可以同时设置边框的样式、宽度和颜色，每个属性的值中间用空格隔开，在这5个属性中，只有border可以同时设置四条边框的属性，其他的只能设置单边框的属性。 示例CSS样式：border: 1px solid red; 2.5.3 设置填充 填充主要是指边框和内部元素之间的空白距离，利用padding属性设置元素内的边界时，也包括5个属性，同样也有四种设置方法。 基本语法：padding:长度 | 百分比; padding-top: 长度 | 百分比; padding-bottom: 长度 | 百分比; padding-left: 长度 | 百分比; padding-right: 长度 | 百分比; 语法说明：长度包括长度值和长度单位，百分比是相对于上级元素宽度的百分比，不允许用负数，padding作为复合属性的四种取值方法请参考边框样式的取值方法。 2.6 圆角边框与块阴影 CSS3对原来的盒模型功能进行了完善，增强了元素边框和背景样式的控制能力，还新增了不少UI特性，用以解决用户界面设置问题。 2.6.1 圆角边框（border-radius属性） 2.6.2 块阴影（box-shadow属性） 2.6.1 圆角边框（border-radius属性） 圆角边框使页面看起来舒服，版块显得圆润而不失灵巧。 基本语法：border-radius ： none | length{1,4} [ / length{1,4} ]? 派生的相关子属性：border-top-right-radius定义右上角的圆角、border-bottom-right-radius定义右下角的圆角、border-bottom-left-radius定义左上角的圆角、border-top-left-radius定义左下角的圆角。 length和border-top-left-radius的取值是由浮点数字和单位标识符组成的长度值，不可为负值。 说明：第一个值是水平半径。如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。如果任意一个值为0，则这个角是矩形，不会是圆的。值不允许是负值。 2.6.1 圆角边框（border-radius属性） length / length这两个参数分别定义角形状的四分之一椭圆的两个半径。第一个值表示圆角的水平半径，第二个值表示圆角的垂直半径，两个参数值通过斜线分隔。如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。如果任意一个值为0，则这个角是矩形，不会是圆的。值不允许是负值。 四个子属性既可以单独使用，也可以采用border-radius的速记形式按照top-left、top-right、bottom-right、bottom-left的顺序来设置的，中间用空格分隔。如果bottom-left省略，那么它等于top-right；如果bottom-right省略，那么它等于top-left；如果top-right省略，那么它等于to