css背景相关设置

1、CSS控制单词换行的属性

word-break	自己决定自动换行的处理方法	①word-break：normal:使用浏览器默认的换行规则。 ②word-break：keep-all:不允许中文字断开。 ③word-break：break-all:允许在单词内换行，可以强行截断英文单词，达到词内换行效果。
word-wrap	用来标明是否允许浏览器在单词内进行断句	①word-wrap：normal  默认值。 ②word-wrap：break-word：在长单词或   URL 地址内部进行换行。将内容在边界内换行（不截断英文单词换行）。

2、CSS设置中英文大小写的属性

text-transform	控制文本的大小写	①text-transform ：capitalize；文本中的每个单词以大写字母开头。 ②text-transform：uppercase；定义仅有大写字母 ③text-transform ：lowercase；定义无大写字母，仅有小写字母。 ④text-transform ：none；默认值
font-variant	设置文本的大小写	①font-variant：normal；默认值 ②font-variant：small-caps；浏览器会显示小型大写字母的字体（只对小写字母有效，大写字母不会有变化）

3、背景渐变

线性渐变：

background-image:linear-gradient(red, blue); /* 标准的语法*/

background: linear-gradient(to bottomright, red , blue); /* 标准的语法*/

background: linear-gradient(180deg, red,blue); /* 标准的语法*/

    .top {

      width: 600px;

      height: 200px;

      margin: 50px auto;

      background: linear-gradient(to left, red, orange, yellow);

    }

径向渐变：向四周扩散的渐变，默认为椭圆状，出发点为中心

语法:background/background-image :radial-gradient(2至多个颜色)在颜色后面添加百分比【从小到大顺序】 ;

background: radial-gradient(circle, red,yellow, green); /* 标准的语法*/

-webkit-radial-gradient(方位,颜色)方位，形状，颜色

 .t1{

      width: 200px;

      height: 200px;

      margin: 50px auto;

      background: radial-gradient(red,yellow,skyblue);

    }

重复渐变:repeating[颜色必须跟百分比，否则无法形成重复渐变的效果]

.t1{

      width: 200px;

      height: 200px;

      margin: 50px auto;

      background: repeating-radial-gradient(circle,red 5%,yellow 20%,orange 37%);

    }

4、css背景相关属性

background-clip	指定背景的显示范围	①background-clip:border-box;  默认值 ②background-clip:padding-box；背景被裁剪到内边距框 ③background-clip:content-box；背景被裁剪到内容框 ④-webkit-background-clip:text  ；
background-origin	绘制背景图像时的起点	①background-origin:padding-box  默认值； ②background-origin:border-box  背景图像相对于边框盒来定位 ③background-origin:content-box  背景图像相对于内容框来定位

5、也可以简写成 transition：all 2s linear