前端学习第十四天

渐变

径向渐变

属性radial-gradient
作用；从中间向四周扩散
circle 圆形
默认是椭圆
可以给颜色加百分比，百分比加从小到大加
径向渐变不可以加方向
加浏览器内核可以加方向

线性渐变

linear-gradient（颜色中间逗号分格颜色）从上到下变颜色，一个颜色不可以渐变，to left逗号分隔右向左，加完浏览器内核后toleft不好用，left从左到右显示    数值deg百分比和方位不可以一起用，
正常的顺时针旋转，浏览器内核逆时针旋转，浏览器内核0度时候跟正常的相差-90度

重复渐变

属性repeating-linear-gradient
属性repeating-radial-gradient
颜色后必须加百分比否则无法形成重复渐变的效果

背景设置

背景图的大小

属性backgroung-size
需要调整图片的大小
像素值【单个【宽度设置为固定的像素值高度百分比增加】【2个像素值第一个代表宽度第二个代表高度】百分比【单个/2个】参照像素值】
cover：背景图片把整个背景铺满
contain；一遍铺满，另一边等比例增加，始终保证整个图像在div的范围内

指定背景显示范围

属性backgroung-clip
调整背景位置
content-box内容区
padding-box内边距
border-box边线默认

绘制背景图像是的起点

属性background-origin
content-box从内容区当起点显示出来
border-box从边框盒当起点显示出来
padding-box默认值

设置文本大小写

属性font-variant:
small-caps小的大写字母
跟lowercase一起执行是会执行small-caps

设置中英文大小写

属性text-transform：
none默认值
lowercase仅有小写字母
uppercase仅有大写字母
capitalize文本中的每个首字母大写

控制单词换行

属性word-break：
normal默认值
keep-all以标点符号作为换行标志
break-all以宽度大小换行

属性word-wrap：
normal默认值
break-word不会打断英文单词

过度

属性：transition:
要过度的属性，花费的时间必须跟s秒单位 运动曲线 何时开始,谁做过度给谁加
transition:变化属性（想要变化什么属性）
  （花费时间 花费多长时间结束）运动曲线 何时开始，如果想要写多个属性变化加逗号分割，如果全部要过度加 all 花费的时间 运动曲线 何时开始  ，过度大部分跟属性：hover一起配合的

属性：transition
timing-functionn：运动的形式
ease：慢慢开始，然后变快，慢慢结束
linear;匀速
ease-in：先慢后快
ease-out先快后慢
steps：动画帧频