7.29知识点总结

一、大小写转换

1.首字母大写：text-transform：capitalize；

2.全部字母大写：text-transform：uppercase；

3. 全部字母小写：text-transform：lowercase；

4.默认：text-transform：none；

5.小的大写字母（对小写字母生效）：font-variant：small-caps/normal；

二、文字换行

1.word-break：keep-all；

以标点符号作为换行的标志

2.word-break：normal

默认

3.word-break: break-all;

字母可强制换行，即可将行末的单词拆分为两行

4.word-wrap: normal/break-word;

normal默认形式/break-word不会打断英文

三、linear-gradient线性渐变

1.默认上下

background-image: linear-gradient(red,yellow,blue);

2.指向左边

background-image: linear-gradient(to  left，red,yellow,blue);

3.指向右边

background-image: linear-gradient(to   right，red,yellow,blue);

4.加浏览器内核

background-image: -webkit-linear-gradient(circle/ellipse，red,yellow,skyblue); 

                                                             circle圆形/ellipse椭圆形

四、radial-gradient径向渐变

background-image: -webkit-repeating-radial-gradient(red 25%,yellow 50%);

五、背景相关属性

1.背景显示范围

默认值

background-clip：border-box；

背景裁至内边距

background-clip：padding-box；

背景被裁至内容框

background-clip：content-box；

2.背景图像显示的起点

默认值

background-origin：padding-box；

背景图像相对盒边框定位

background-origin：border-box；

背景图像相对内容框定位

background-origin：content-box；

3.   background-size: cover/contain;

       cover：背景图片扩至把整个背景全部覆盖

       contain：一边铺满，另一边等比增加，始终保证整个图片都在div中（保证图片本身宽高等比）

六、过渡属性

1.过渡样式，默认all

transition-property: all;

2.运动时间

transition-duration: 5s;                

3.延迟时间

 transition-delay: 0.5s;

4.运动形式

transition-timing-function：ease（默认）/linear（匀速）/ease-in（加速）/ease-out（减速）/ease-in-out（先加速后减速）/steps()（分几步加载）；