文本属性、渐变、过渡

一、css中部分文本属性

1、word-break（汉字）

normal：默认，

keep-all：以符号作为换行的标志

break-all：不允许文字断开

2、word-wrap（英文）

normal：默认值

break-word：在长单词或者地址（url）内部进行换行，在盒子内部边界进行换行，不截断英文单词

3、text-trasfrom（控制文本大小写）

capitalize：文本中所有的字符以大写英文字母开头。

uppercase：文本中所有字母转为大写

lowercase：文本中所有小写字母转化为大写并缩小

none：默认值

4、font-variant（设置文本的大小写）

normal：默认值

small-caps：浏览器会显示小型大写字母的字体

二、css关于背景的设置

1关于背景大小的总结

background-size：四类：

设置单个像素值（宽度设置为固定的像素值后高度根据百分比增加）

设置两个像素值：第一个代表宽度，第二个代表高度

设置百分比（单个/两个）

参照像素值：cover  背景图片把整个背景全部覆盖；contain  一边铺满，另一边等比增加，始终保持整个图像在div的范围内

2、background-clip：制定背景的显示范围

border-box：默认值

padding-box：背景被裁减到内边距框

content-box：背景被裁减到内容框

3、background-origin：绘制背景图像时的起点

padding-box：默认值

border-box：背景图像相对于边框盒来定

content-box：背景图像相对于内容框来定

三、渐变

1、线性渐变：方向  默认为从上到下

语法：background:linear-gradient(两到多个颜色，颜色中间用逗号分隔)

linear-gradient(to 方向（1到2个），两到多个颜色，颜色中间用逗号分隔)

linear-gradient(度数deg，两到多个颜色，颜色中间用逗号分隔)

加浏览器内核后：

方向：没有to，直接加left/right/...（两个方向的时候，加了内核之后的识别标准和不加的不一样）

度数：从右边开始沿逆时针方向进行

2、径向渐变：由内而外向四周扩散，默认为椭圆状

语法：background/background-image:radial-gradient(两到多个颜色)

如果在颜色后面添加百分比，需要按照从小到大的顺序

3、重复渐变：repeating（颜色必须跟百分比，否则无法形成重复渐变的效果）

四、过渡效果

1、transition-property：需要过渡的样式，默认为all

2、transition-duration：设置运动的时间，默认为0s

3、transition-delay：设置延迟的时间，默认为0s

4、transition-timing-function：设置运动的形式，默认为ease（慢速开始，然后变快，然后慢速结束）

linear：匀速     ease-in：加速     ease-out：减速     ease-in-out：先加速后减速

cubic-bezier：贝塞尔曲线（x1,y1,x2,y2） http:cubic-bezier.com（网址）

steps（）实现一个关键逐帧动画的功能