CSS渐变、文本、字体效果的呈现

**

CSS渐变：（gradients）可以让两个或者多个指定颜色之间呈现平稳的过渡；

**
线性渐变：可以指定方向的渐变
径向渐变：有中心定义的渐变方式。

线性渐变：
使用background-image:可做渐变处理
background-image:linnear-gradient(direction,color1,color2);

默认方式是从上到下渐变；

to +基本的方向：
direction:to bottom-right右下角渐变同理还有
to right
to top
to bottom,
to left
这种方式

角度渐变方式

background-image:linnear-gradient(angle,color1,color2);

angle=0 deg是从下到上渐变，当angle为90deg时从左到右渐变；

角度控制渐变的方式：初始为0 deg指向上的指针，顺时针方向渐变；90deg由左到右，180deg由上到下

渐变颜色可以有多个：
当只是输入颜色没有设置其他属性的时候，每种颜色的占比相同为均匀分布；
可以在每种颜色后空格+百分比控制颜色的渐变范围；

透明度渐变；颜色使用rgba(0,0,0,transparent)。相较于rgb（0，0，0）后面多了一个透明度，定义这个transparent完成透明度渐变

重复渐变：一般渐变都是直接覆盖在内容的可以使用background-image:repeating-linnear-gradient(angle,color1,color2);完成重复渐变；

径向渐变：

创建一个径向渐变需要创建两个及以上颜色，可以定义渐变中心、形状（椭圆）、渐变大小。
background-image:radial-gradient(shape size at position,color1,color2);

默认情况是从中心向四周渐变；
shape:circle、ellipse
size:closest-side、farthest-side、closest-corner、farthest-corner
重复镜像渐变:
background-image:repeatint-radial-gradient(shape size at position,color1,color2);

*CSS文本效果：

基本文本效果：
text-shadow设置行级元素阴影的
box-shadow设置块级元素阴影的
text-overflow
word-wrap（Chrome23以上）
word-break（Oprea15以上）

text-shadow和box-shadow使用：
xxxx-shadow:h-shadow(水平阴影) v-shadow（垂直阴影） blur(模糊，px为单位) spread阴影尺寸 color (颜色) insect (外阴影转到内阴影)

如果阴影不够明显可以再通过:after或者:before伪元素添加更多的阴影

阴影可以用来做卡片效果，完成一些顺滑的交互通过hover等操作让页面渲染效果更好；

overflow、text-overflow属性：
可以决定如何显示超出的文本
ellipsis
clip
等等

CSS的单词拆分换行：
word-break
keep-all:只能在空格或者连词符处换行
break-all允许单词错开
菜鸟教程更多文本效果：(https://www.runoob.com/css3/css3-text-effects.html)

CSS中的字体

font-face:
CSS中已经不需要用户下载字体，而是使用CSS的时候自动（web open font format字体简称WOFF）让用户匹配网页设计师采用的字体,而且现在大部分浏览器还支持SVG字体/折叠，IE9还支持EOT（embedded opentype）字体这意味着网页可以采用自己使用的。但设计效果要清晰最好不要影响阅读。
如果需要让浏览器引用字体可以使用（css中使用）：
@font-face{
font-family:定义字体名;
src：url(定义字体URL地址名称)
}
就可以在网页中用了
font-family:引用自定义字体了！

还有font-weight/fonstyle/font-stretch对已有字体进行修改等操作；