CSS 渐变、文本效果、字体

一、CSS3渐变：

CSS3渐变（gradient）可以在两个或多个指定的颜色之间显示平稳的过渡。CSS3定义了两种类型的渐变（gradient）：线性渐变（linear gradient）-向下/向上/向左/向右/对角方向渐变；径向渐变（radial gradient）-由它们的中心定义。

1）、线性渐变的语法：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

从上到下的线性渐变：

从左到右的线性渐变：

对角线性渐变：

使用角度线性渐变的语法：

background-image: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的夹角。逆时针方向计算。

使用多个颜色节点的线性渐变：

使用透明度的线性渐变：

重复的线性渐变：

2）、径向渐变：

径向渐变有它的中心定义。为了创建一个径向渐变，必须至少定义两种颜色节点，同时，可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是center，渐变的形状是ellipse（椭圆形），渐变的大小是farthest-corner（到最远的角）。

径向渐变的语法：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

径向渐变-颜色节点不均匀分布：

径向渐变-颜色节点均匀分布：

径向渐变-设置形状：

径向渐变-设置大小：closest-side、farthest-side、closest-corner、farthest-corner。

重复的径向渐变：

二、CSS3文本效果：

CSS3文本效果包含text-shadow、box-shadow、text-overflow、word-wrap、word-break。

1、文本阴影：

text-shadow属性适用于文本阴影，指定水平阴影、垂直阴影、模糊的距离以及阴影的颜色：

2、盒子阴影：

box-shadow属性适用于盒子阴影。

可以在 ::before 和 ::after 两个伪元素中添加阴影效果

3、文本溢出：

text-overflow属性指定向用户如何显示溢出的内容：

4、换行：

word-wrap属性用于文本换行：

5、单词拆分换行：

word-break拆分换行属性指定换行规则：

CSS3新文本属性：

三、CSS3字体：

使用CSS3，网页设计师可以使用任何需要的字体。这些字体在CSS3@font-face规则中定义。在@font-face规则中，首先定义字体的名称，然后指向该字体文件。

CSS3字体描述：

描述符	值	描述
font-family	name	必需。规定字体的名称。
src	URL	必需。定义字体文件的 URL。
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可选。定义如何拉伸字体。默认是 "normal"。
font-style	normal italic oblique	可选。定义字体的样式。默认是 "normal"。
font-weight	normal bold 100 200 300 400 500 600 700 800 900	可选。定义字体的粗细。默认是 "normal"。
unicode-range	unicode-range	可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。