CSS3新增的语法（二）

- 6.CSS3新增边框属性
- - 6.1 边框圆角
  - 6.2 边框外轮廓（了解）
- 7.CSS3新增文本属性
- - 7.1 文本阴影
  - 7.2 文本换行
  - 7.3 文本溢出
  - 7.4 文本修饰
  - 7.5 文本描边
- 8. CSS3 新增渐变
- - 8.1 线性渐变
  - 8.2 径向渐变
  - 8.3 重复渐变
- 9. web 字体
- - 9.1 基本用法
  - 9.2 定制字体
  - 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 属性规定装饰线的粗细。

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/