2 CSS3 新增边框属性
2.1 边框圆角
CSS 属性名 | 含义 | 值 |
---|---|---|
border-top-left-radius | 设置左上角圆角 | 一个长度:同时设置x半径和y半径。 二个长度:第一个是x半径,第二个是y半径 |
border-top-right-radius | 设置右上角圆角 | 一个长度:同时设置x半径和y半径。 二个长度:第一个是x半径,第二个是y半径 |
border-bottom-left-radius | 设置左下角圆角 | 一个长度:同时设置x半径和y半径。 二个长度:第一个是x半径,第二个是y半径 |
border-bottom-right-radius | 设置右下角圆角 | 一个长度:同时设置x半径和y半径。 二个长度:第一个是x半径,第二个是y半径 |
border-radius | 复合属性,同时设置4个圆角 |
总结:
border-radius 复合属性值的规则:
① 设置正圆圆角
/* 设置4个角 */ border-radius: 20px; /* 20px:左上和右下 40px:左下和右上 */ border-radius: 20px 40px; /* 20px:左上 40px:左下和右上 60px:右下 */ border-radius: 20px 40px 60px; /* 左上 右上 右下 左下 */ border-radius: 10px 20px 30px 40px;
② 设置椭圆圆角
值的中间写个
/
, 左边设置 x 半径,右边设置 y 半径,每一边都可以设置1~4个值/* 复合属性设置椭圆圆角 */ border-radius: 20px / 40px 30px; border-radius: 20px 30px / 40px 30px; border-radius: 20px 30px 30px / 40px 30px; border-radius: 20px 30px 30px 40px / 40px 30px;
使用百分比作为长度设置圆角半径:
x 半径参照元素的宽度,y 半径参照元素的高度。
2.2 外轮廓 outline
CSS 属性名 | 含义 | 值 |
---|---|---|
outline-style | 外轮廓风格 | 同 border-style |
outline-width | 外轮廓宽度 | 长度 |
outline-color | 外轮廓颜色 | 颜色 |
outline | 外轮廓复合属性 | |
outline-offset | 外轮廓与边框距离 该属性并不是 outline 的子属性,需要单独设置。 | 长度,可以是负值 |
outline 的特点(outline 与边框的区别)?
- 外轮廓不占位置,不影响盒子大小。
- 外轮廓如果与边框重叠了,会显示在边框的上面。
3 CSS3 新增文本属性
CSS 属性名 | 含义 | 值 |
---|---|---|
text-align-last | 设置元素中最后一行文字的水平对齐方式 | start: 文字书写开始方向,默认值。 end: 靠文字书写结束方向。 left: 靠左。 right: 靠右。 justify: 两端对齐。 |
text-decroation-line | 文本修饰线的形式 | none: 没有修饰线。 **underline:**下划线。 overline: 上划线。 **line-through:**删除线。 |
text-decoration-style | 文本修饰线的风格 | solid: 实现。 **dahsed:**虚线。 **dotted:**点线。 **double:**双实线。 **wavy:**波浪线 |
text-decoration-color | 文本修饰线的颜色 | 颜色 |
text-decoration | 复合属性 | 没有属性和数量要求 |
white-space | 设置元素中文本的换行方式 | **normal:**默认值。 nowrap: 强制不换行。 pre: 原格式显示。 pre-wrap: 原格式显示+自动换行。 pre-line: 在默认效果的基础上+识别换行符 |
text-overflow | 设置文本溢出的显示方式 | **clip:**裁剪,默认值。 **ellipsis:**显示为省略号。 |
text-shadow | 设置文字阴影 | 可以设置阴影偏移位置、模糊值和颜色 |
-webkit-text-stroke | 文字描边 | 需要设置两个值,一个是颜色,一个是描边宽度。 |
总结:
CSS3规定,text-align 属性默认值不再是 left, 而是 start,表示当前所使用的语言书写开始的方向。
CSS3中,text-decoration 成为了复合属性,原来 text-decoration的功能交给了子属性 text-decoration-line。
如果设置溢出文本显示为省略号,有两个前提,第一,强制文字不换行;第二,设置溢出内容隐藏。
/* 文字强制一行显示 */ white-space: nowrap; /* 设置隐藏溢出内容 */ overflow: hidden; /* 溢出的文本显示为省略号 */ text-overflow: ellipsis;
文字阴影,相比于盒子阴影不能设置内阴影和外延值, 与盒子阴影一样也可以设置多层阴影。
4 CSS3 渐变
渐变在 CSS 中被作为一个图像去使用,需要配合使用图像的 CSS 属性才能用,大部分情况需要配合 background-image 使用。
4.1 线性渐变
linear-gradient(渐变方向, 颜色1 位置, 颜色2 位置, 颜色3 位置);
1. 渐变方向:
使用关键字: to left、to top、to right、to bottom、to top left、to top right、to bottom left、to bottom right
使用角度: 0deg~360deg 0deg从下到上, 角度越大方向沿顺时针旋转
2. 颜色
3. 颜色的位置: 使用长度设置颜色位置
4.2 径向渐变
radial-gradient(形状 半径 at 圆心坐标, 颜色1 位置, 颜色2 位置, 颜色3 位置)
1. 形状,可以指定 circle 或者 ellipsis
2. 半径, 使用长度指定半径,如果省略会到达元素边界
3. 圆心坐标, 使用两个关键字(left、right、center/ top bottom center)
使用两个长度表示坐标
5 颜色
6. 颜色的位置: 使用长度设置颜色位置
4.3 重复渐变
repeating-linear-gradient() 重复线性渐变
repeating-radial-gradent() 重复径向渐变