(十二).CSS3中的边框圆角，外边框，文本样式，背景，渐变样式
1 CSS3 新增边框属性
1.1 边框圆角
| CSS 属性名 | 含义 | 值 |
|---|---|---|
| border-top-left-radius | 左上角 | 长度 |
| border-top-right-radius | 右上角 | 长度 |
| border-bottom-left-radius | 左下角 | 长度 |
| border-bottom-right-radius | 右下角 | 长度 |
| border-radius | 长度 |
单个圆角属性值的设置规则：
border-top-left-radius: 10px;
/* 使用百分比时，参照的元素本身的宽高 */
border-top-left-radius: 10%;
/* 两个值得时候，第一个是x轴的半径长，第二个是y轴的半径长 */
border-top-right-radius: 50px 10px;
/* 百分比的时候也一样 */
border-bottom-right-radius: 50% 10%;
复合属性的使用：
/* 1个值同时设置4个角 */
border-radius: 10px;
border-radius: 50%;
/* 2个值同时设置4个角
左上右下 右上左下
*/
border-radius: 10px 20px;
/* 3个值同时设置4个角
左上 右上左下 右下
*/
border-radius: 10% 30% 50%;
/* 4个值同时设置4个角
左上 右上 右下 左上
*/
border-radius: 10% 20% 30% 40%;
/* 分别表示 x轴 和 y轴 */
/* x轴 y轴
左上角 50px 10px
右上角 10px 20px
右下角 50px 30px
左下角 10px 20px
'/'之前表示的是x轴的半径长度，之后表示的是y轴的半径长度
*/
border-radius: 50px 10px/10px 20px 30px;
1.2 外轮廓
| CSS 属性名 | 含义 | 值 |
|---|---|---|
| outline-style | 样式 | 同 border-style的值 |
| outline-width | 宽度 | 长度 |
| outline-color | 颜色 | 颜色 |
| outline | 复合属性 | eg: 1px solid #fff |
| outline-offset | 外廓线的偏移量，外轮廓与边框的距离， 并不是 outline 的子属性 |
长度（负值表示往内偏移） |
外轮廓与边框的区别：
1. 外轮廓不是盒子的一部分，不影响盒子大小，不占位置
2. 外轮廓位置如果与边框重合，外轮廓显示在上面
2 CSS3 新增文本属性
| CSS 属性名 | 含义 | 值 |
|---|---|---|
| text-align-last | 最后一行文本水平对齐方式 | start：起始方向对齐，默认值。 end：结束方向对齐。 justify：两端对齐。 left：左对齐。 right：右对齐。 center：居中对齐。 |
| text-decoration-line | 文本修饰线类型 | none：无修饰线。 underline：下划线。 line-throuth：删除线。 overline：上划线 |
| text-decoration-style | 文本修饰线样式 | solid：实线。 dotted：点线。 dashed：虚线。 double：双实线。 wavy：波浪线 |
| text-decoration-color | 文本修饰线颜色 | 颜色 |
| text-decoration | 复合属性 | 值没有顺序和数量要求 |
| white-space | 设置文本显示格式 | normal: 默认值。 pre：文本原格式显示。 pre-wrap：在pre基础上增加自动换行。 pre-line：在normal基础上识别文本内自带的换行。 nowrap：强制一行显示。 |
| text-overflow | 设置文本溢出方式，必须和overflow一起使用才会生效 | clip：默认值。 ellipsis：省略号。 |
| text-shadow | 文本阴影 |
单行长文本显示省略号：
/* 强制显示在一行 */
white-space: nowrap;
/* 溢出隐藏 */
overflow: hidden;
/* 显示省略号 */
text-overflow: ellipsis;
text-shadow 文本阴影的设置规则：
/* 两个长度阴影偏移位置 */
text-shadow: 2px 2px;
text-shadow: 5px 5px #ccc;
text-shadow: #ccc -5px -5px ;
/* 设置模糊值 */
text-shadow: 5px 5px 5px #ccc;
/* 多层阴影 */
text-shadow:1px 1px #bbb,
2px 2px #aaa,
3px 3px #999,
4px 4px #888,
5px 5px #777;
3 CSS3 新增背景属性
3.1 新增属性
① background-origin
该属性可以设置背景图像定位的原点，有如下值：
padding-box 原点在内边距上，默认值
content-box 原点在内容上
border—box 原点在边框上
② background-clip
该属性可以设置背景图像的显示区域，有如下值：
border-box 边框以及以内有背景图，默认值
padding-box 内边距和内容上有背景图
content-box 只有内容上有背景图
text 只有文字上有背景图，需要加 -webkit- 私有前缀
③ background-size
该属性可以设置背景图片尺寸，值的设置规则如下：
1. 设置两个长度，分别表示图片的宽度、高度
2. 使用百分比作为长度，宽度参照元素宽度，高度参照元素高度
3. 如果只设置了一个长度，该长度表示图片的宽度，图片的高度根据比例自动计算
4. contain 自动调整图片大小适应元素，优先保证图片显示完整
5. cover 自动调整图片大小适应元素，保证元素上每一部分都有背景图，常用
3.2 background 复合属性
新增了 3 个子属性，复合属性规则如下：
1. 如果值中存在 content-box、padding-box、border-box
如果只有一个值，表示同时设置 background-origin 和 background-clip
如果有两个值，第一个是 background-origin，第二个是 background-clicp
2. background-position 和 background-size 的值必须写在一起，使用 / 分隔
前面是 background-position， 后面是 background-size
background: #ccc url(../images/31.jpg) no-repeat 0 0/cover content-box padding-box ;
3.3 多背景图
background: url(../images/bg-tl.png) no-repeat left top,
url(../images/bg-tr.png) no-repeat right top,
url(../images/bg-bl.png) no-repeat left bottom,
url(../images/bg-br.png) no-repeat right bottom,
url(../images/bg05.jpg) no-repeat center/cover;
如果背景图位置有重合，先写的背景图显示在上面！
实现高度的视窗的方法
? 第一种设置 html和body高度为100%，在设置元素高度100%即可实现
? 第二种直接设置 元素高度为 100vh即可
4 CSS3 渐变
CSS 中，渐变被作为图片使用，需要相关的CSS属性进行配合，如 background-image。
4.1 线性渐变
linear-gradient(渐变方向， 颜色列表)
1. 渐变方向
① 使用关键字设置
to left、to top、to left top、to right bottom ...
② 角度
0deg ~ 360deg
2. 颜色列表
每个颜色可以指定位置，位置使用长度表示
如果颜色不指定位置，各个颜色的位置平均分布
background-image: linear-gradient(to right, #f00, #00f);
background-image: linear-gradient(to right bottom, #000, #0ff);
/* deg 的度数可以理解为钟的指向 */
background-image: linear-gradient(180deg, #ccc, #ff0);
/* 指定颜色开始结束长度 (只有不同颜色之间的部分才会渐变)*/
background-image: linear-gradient(90deg, #f00 0px, #f00 300px, #00f 300px, #00f 600px);
background-image: linear-gradient(90deg, #f00 0, #f00 50%, #00f 50%, #00f 100%);
/*
指定多种颜色 ，默认是多种颜色等比例平分
*/
background-image: linear-gradient(180deg, #000, #ff0, #0ff);
/*
指定多种颜色 ，且指定比例渐变
*/
background-image: linear-gradient(90deg, #f00 0, #f0f 25%, #00f 50%, #cfc 75%, #0cf 100%);
4.2 径向渐变（了解）
radial-gradient(半径 at 圆心，颜色列表)
4.3 重复渐变
repeating-linear-gradient()
repeating-radial-gradient();