CSS3新增的语法（二）
-
- 6.CSS3新增边框属性
-
- [6.1 边框圆角](#6.1 边框圆角)
- [6.2 边框外轮廓（了解）](#6.2 边框外轮廓（了解）)
- 7.CSS3新增文本属性
-
- [7.1 文本阴影](#7.1 文本阴影)
- [7.2 文本换行](#7.2 文本换行)
- [7.3 文本溢出](#7.3 文本溢出)
- [7.4 文本修饰](#7.4 文本修饰)
- [7.5 文本描边](#7.5 文本描边)
- [8. CSS3 新增渐变](#8. CSS3 新增渐变)
-
- [8.1 线性渐变](#8.1 线性渐变)
- [8.2 径向渐变](#8.2 径向渐变)
- [8.3 重复渐变](#8.3 重复渐变)
- [9. web 字体](#9. web 字体)
-
- [9.1 基本用法](#9.1 基本用法)
- [9.2 定制字体](#9.2 定制字体)
- [9.3 字体图标](#9.3 字体图标)
6.CSS3新增边框属性
6.1 边框圆角
- 在 CSS3 中，使用 border-radius 属性可以将盒子变为圆角。
- 同时设置四个角的圆角：
border-radius:10px; - 分开设置每个角的圆角（几乎不用）：
- 分开设置每个角的圆角，综合写法（几乎不用）：
border-raidus: 左上角x 右上角x 右下角x 左下角x / 左上y 右上y 右下y 左下y；
6.2 边框外轮廓（了解）
- outline-width ：外轮廓的宽度。
- outline-color ：外轮廓的颜色。
- outline-style ：外轮廓的风格。
none ： 无轮廓
dotted ： 点状轮廓
dashed ： 虚线轮廓
solid ： 实线轮廓
double ： 双线轮廓 - outline-offset 设置外轮廓与边框的距离，正负值都可以设置。
注意： outline-offset 不是 outline 的子属性，是一个独立的属性。
- outline 复合属性
outline:50px solid blue;
7.CSS3新增文本属性
7.1 文本阴影
- 在 CSS3 中，我们可以使用 text-shadow 属性给文本添加阴影。
- 语法：
text-shadow: h-shadow v-shadow blur color;
默认值： text-shadow:none 表示没有阴影。
7.2 文本换行
- 在 CSS3 中，我们可以使用 white-space 属性设置文本换行方式。
- 常用值如下：
| 值 | 含义 |
|---|---|
| normal | 文本超出边界自动换行，文本中的换行被浏览器识别为一个空格。（默认值） |
| pre | 原样输出，与 pre 标签的效果相同。 |
| pre-wrap | 在 pre 效果的基础上，超出元素边界自动换行。 |
| pre-line | 在 pre 效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格会忽略。 |
| nowrap | 强制不换行 |
7.3 文本溢出
- 在 CSS3 中，我们可以使用 text-overflow 属性设置文本内容溢出时的呈现模式。
- 常用值如下：
| 值 | 含义 |
|---|---|
| clip | 当内联内容溢出时，将溢出部分裁切掉。 （默认值） |
| ellipsis | 当内联内容溢出块容器时，将溢出部分替换为 ... 。 |
注意：要使得 text-overflow 属性生效，块容器必须显式定义 overflow 为非 visible 值， white-space为 nowrap 值。
7.4 文本修饰
- CSS3 升级了 text-decoration 属性，让其变成了复合属性。
text-decoration: text-decoration-line || text-decoration-style || text-decorationcolor； - 子属性及其含义：
- text-decoration-line 设置文本装饰线的位置
- none ： 指定文字无装饰 （默认值）
- underline ： 指定文字的装饰是下划线
- overline ： 指定文字的装饰是上划线
- line-through ： 指定文字的装饰是贯穿线
- text-decoration-style 文本装饰线条的形状
- solid ： 实线 （默认）
- double ： 双线
- dotted ： 点状线条
- dashed ： 虚线
- wavy ： 波浪线
- text-decoration-color 文本装饰线条的颜色
- text-decoration-thickness 属性规定装饰线的粗细。
- text-decoration-line 设置文本装饰线的位置
7.5 文本描边
注意：文字描边功能仅 webkit 内核浏览器支持。
- -webkit-text-stroke-width ：设置文字描边的宽度，写长度值。
- -webkit-text-stroke-color ：设置文字描边的颜色，写颜色值。
- -webkit-text-stroke ：复合属性，设置文字描边宽度和颜色。
8. CSS3 新增渐变
8.1 线性渐变
-
多个颜色之间的渐变， 默认从上到下渐变。
background-image: linear-gradient(red,yellow,green);
-
使用关键词设置线性渐变的方向。
background-image: linear-gradient(to top,red,yellow,green);
background-image: linear-gradient(to right top,red,yellow,green);
-
使用角度设置线性渐变的方向。
background-image: linear-gradient(30deg,red,yellow,green);
-
调整开始渐变的位置。
background-image: linear-gradient(red 50px,yellow 100px ,green 150px);
8.2 径向渐变
-
多个颜色之间的渐变， 默认从圆心四散。（注意：不一定是正圆，要看容器本身宽高比）
background-image: radial-gradient(red,yellow,green);
-
使用关键词调整渐变圆的圆心位置。
background-image: radial-gradient(at right top,red,yellow,green);
-
使用像素值调整渐变圆的圆心位置。
background-image: radial-gradient(at 100px 50px,red,yellow,green);
-
调整渐变形状为正圆 。
background-image: radial-gradient(circle,red,yellow,green);
-
调整形状的半径 。
background-image: radial-gradient(100px,red,yellow,green);
background-image: radial-gradient(50px 100px,red,yellow,green);
-
调整开始渐变的位置。
background-image: radial-gradient(red 50px,yellow 100px,green 150px);
8.3 重复渐变
无论线性渐变，还是径向渐变，在没有发生渐变的位置，继续进行渐变，就为重复渐变。
- 使用 repeating-linear-gradient 进行重复线性渐变，具体参数同 linear-gradient 。
- 使用 repeating-radial-gradient 进行重复径向渐变，具体参数同 radial-gradient 。
9. web 字体
9.1 基本用法
可以通过 @font-face 指定字体的具体地址，浏览器会自动下载该字体，这样就不依赖用户电脑上的字 体了。
-
语法（简写方式）
@font-face {
font-family: "定义的字体名称";
src: url('./方正手迹.ttf');
} -
语法（高兼容性写法）
@font-face {
font-family: "定义的字体名称";
font-display: swap;
src: url('webfont.eot'); /* IE9 /
src: url('webfont.eot?#iefix') format('embedded-opentype'), / IE6-IE8 /
url('webfont.woff2') format('woff2'),
url('webfont.woff') format('woff'), / chrome、firefox /
url('webfont.ttf') format('truetype'), / chrome、firefox、opera、Safari,Android*/
url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
9.2 定制字体
- 中文的字体文件很大，使用完整的字体文件不现实，通常针对某几个文字进行单独定制。
- 可使用阿里 Web 字体定制工具：https://www.iconfont.cn/webfont
9.3 字体图标
- 相比图片更加清晰。
- 灵活性高，更方便改变大小、颜色、风格等。
- 兼容性好， IE 也能支持。
字体图标的具体使用方式，每个平台不尽相同，最好参考平台使用指南，本人使用最多的是阿里图标库。
阿里图标官网地址：https://www.iconfont.cn/