总结
1. 基本属性
- border-width: 设置边框的粗细
- border-color: 设置边框的颜色
- border-style: 设置边框的类型
(1)简写语法:border: border-width border-style border-color
注意:三个属性的顺序任意,个数任意,但是这三个属性中必须要有 “border-style”。
(2)对边框的四条边分别设置不同的属性,以style为例:
border-top-style: /*设置元素顶部边框类型*/
border-right-style: /*设置元素右边边框类型*/
border-bottom-style: /*设置元素底部边框类型*/
border-left-style: /*设置元素左边边框类型*/
另一种写法:
border-style: solid;
/* 一个值时,表示四条边都是solid类型 */
border-style: solid dotted;
/* 两个值时,第一个值表示上下边框的类型,第二个值表示左右边框的类型 */
border-style: solid dotted dashed;
/* 三个值时,第一个值表示上边框的类型,第二个值表示左右边框的类型,第三个值表示下边框的类型 */
border-style: solid dotted dashed inset;
/* 四个值时,依次代表上右下左边框 */
2. 边框类型
属性值 | 功能描述 |
none | 定义无边框 |
dotted | 定义点状边框 |
dashed | 定义虚线边框 |
solid | 定义实线边框 |
double | 定义双线。双线的宽度等于border-width的值。 |
inherit | 规定从父元素继承边框样式(部分浏览器不支持这个属性值) |
3. 圆角边框属性
- border-radius
(1)对边框的四条边分别设置圆角:
border-top-left-radius:
/* 两个值时分别代表圆角的水平半径和垂直半径 */
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:
另一种写法:border-radius 的四个值是按照 top-left、top-right、bottom-right 和 bottom-left 顺序来设置的。
border-radius:{1}设置一个值时,四个圆角的效果一样;
border-radius:{2}设置两个值时,top-left=bottom-right=第一个值,top-right=bottom-left=第二个值;
border-radius:{3}设置三个值时,第一个值设置top-left,第二个值设置top-right和bottom-left,第三个值设置bottom-right;
border-radius:{4}设置四个值是,就按顺序设置样式。
(2)border-radius 的值:如果存在反斜杠符号 “/”,“/” 前面的值是设置圆角的水平方向半径,“/”后面的值是设置圆角的垂直方向的半径;如果没有 “/”,则圆角的水平和垂直方向的半径值相等。
4. 盒子阴影属性
- box-shadow
(1)box-shadow 的语法规则:
/*设置盒子一条边的阴影效果*/
box-shadow:none | [ inset x-offset y-offset blur-radius spread-radius color ]
/*设置盒子多条边的阴影效果,用逗号隔开*/
box-shadow:none | [ inset x-offset y-offset blur-radius spread-radius color ],[ inset x-offset y-offset blur-radius spread-radius color ]
注意:
【1】 设置盒子少于四条边的阴影效果:
1)不设置模糊半径 或 模糊半径为 “0” ,不设置扩展半径 或 扩展半径为 “0”,表现正常
2)设置模糊半径不为 “0” ,不设置扩展半径 或 扩展半径为 “0”,其余边也会有阴影,不是我们想要的效果
3)设置模糊半径不为 “0” ,设置扩展半径不为 “0”,表现正常
即:两个参数要么都不设置 或 为“0”,要么都设置为非 “0” 。
示例1:设置一条边
box-shadow: -5px 0 5px red;
box-shadow: -5px 0 5px -4px red;
修正:
示例2:设置两条边
box-shadow: -5px 0 5px red, 0 5px 5px blue;
修正:
box-shadow: -5px 0 5px -4px red, 0 5px 5px -4px blue;
【2】设置盒子四条边的阴影效果:
如果设置四条边,那么上面说的限制就没有了,如下所示:
box-shadow: -5px 0 5px red, 0 5px 5px blue, 5px 0 5px green, 0 -5px 5px orange;
(2)box-shadow 的参数:
参数 | 名称 | 描述 | |
1 | none | 默认值 | 没有任何阴影效果 |
2 | inset | 阴影类型 | 可选值。如果不设置,其默认的投影方式是外阴影;如果取其唯一值 “inset”,就是给元素设置内阴影。 |
3 | x-offset | 阴影水平偏移量 | 可取正负值。如果取正值,则阴影在元素的右边,反之,在左边。 |
4 | y-offset | 阴影垂直偏移量 | 可取正负值。如果取正值,则阴影在元素的底部,反之,在顶部。 |
5 | blur-radius | 阴影模糊半径 | 可选参数。只能取正值。如果取值为“0”,表示阴影不具有模糊效果;如果取值越大,阴影的边缘就越模糊。 |
6 | spread-radius | 阴影扩展半径 | 可选参数。可取正负值。如果取正值,则阴影都延展扩大,反之,则缩小。 |
7 | color | 阴影颜色 | 可选参数。如果不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,建议不要省略这个参数。 |
参考:
END