线性渐变
定义背景颜色 background:linear-gradient(position,color2,color2……);
- position为渐变方向，to x表示渐变方向是向x方向，如不写则默认从上到下，用逗号隔开
- background: linear-gradient(red,blue,yellow); 从上到下，从红到黄
- background: linear-gradient(to top,red,green,pink);从下到上
- background: linear-gradient(to right,red,green,pink); 从左到右
- background: linear-gradient(to left,red,green,pink); 从右到左
- background: linear-gradient(to left bottom,red,green,pink);从右上到左下
径向渐变
定义背景颜色 background: radial-gradient(center,shape size,start-color,…,last-color) 直接看实例：
- background: radial-gradient(red,green,yellow); 从内向外红绿黄渐变
- background: radial-gradient(red 20%,green 50%,yellow 80%); 从内向外红绿黄渐变，但是每个颜色按百分比的大小排列来显示：
百分比的作用并非将元素面积分成按100%，而是单纯的看大小，当某一颜色是100%，那么渐变到他的地方的时候，扩散出来的全是他的本色，我们可以对比一下：background: radial-gradient(red 100%,green 50%,yellow 80%);和background: radial-gradient(red 20%,green 50%,yellow 100%);的区别，可以更清楚的看到： - background: radial-gradient(circle, red,green,yellow); 渐变发散出的形状是圆形，从内向外红绿黄渐变
文本阴影
text-shadow: h-shadow v-shadow blur color;(使用空格隔开)
- h-shadow为水平方向向右的数值，当为负数时，则表示向左，为必填值；
- v-shadow为垂直方向向下的数值，当为负数时，表示向上，为必填值；
- blur为模糊程度的数值，越大越模糊，当数值=0时，阴影和字体的清晰度显示一样
单行省略号
- overflow: hidden;超出部分不显示，即溢出隐藏
- white-space: nowrap;超出部分不换行，在同一行显示
- text-overflow: ellipsis;超出部分用省略号
多行省略号
- overflow: hidden;溢出隐藏
- text-overflow: ellipsis;超出部分用省略号
- display: -webkit-box;设置盒子属性
- -webkit-line-clamp: n;n为数值，表示该段文字分n行显示
- word-break: break-all;单词破坏，可将行末的英文单词拆分到下一行，使得页面更美观
- -webkit-box-orient: vertical;盒子能够实现多行展示
定义字体
@font-face{font-family:字体名字;src:url(字体包路径1);src:url(字体包路径2);……}
- 多个字体包的作用是兼容不同的浏览器，使得显示更加稳定，需要都加上；
- 练习时可使用工具www.iconfont.com 下载字体包，在style中先定义字体，再使用字体，且适用对象只能是定义的内容，超出定义内容的文本则不生效。
