H5C304

H5C304

1、渐变

1）线性渐变



point，angle可取4个值：如上所示

需要使用background添加



2）径向渐变



position是按照元素右上为原点的



3）重复渐变

同样有重复线性渐变和重复径向渐变

repeating-linear-gradient

repeating-radial-gradient

2.background

1)background-color

添加背景颜色

background-image

添加背景图片，若图片大于盒子，则默认从左上角开始放置

若图片小于容器，默认平铺

background-repeat

设置平铺样式

round-将图片缩放后再平铺

space-不缩放，产生间距

backgrounf-attachmen:scroll/fixed

设置在滚动容器的背景的行为，跟随滚动或固定

local

Local与scroll的区别，前提是滚动当前容器的内容。Loacl:背景图片会跟随内容一起滚动。scroll:不会

2）background-size







3）

用于提升服务端响应区域的大小





这样可以使响应的区域在无形中变大

3、边框图片

一一对应。



123445678将作为内容的边框

border-image-source:指定边框图片的路径







案例：微信气泡背景根据内容自动缩放

边框图片的本质是背景，并不会影响元素内容的放置

4、过渡：

在选择器内设置

通过过渡transition,我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果. 要实现这一点，必须规定两项内容：1.规定希望把效果添加到哪个 CSS 属性上，2.规定效果的时长

1. 语法：
   
   transition: property duration timing-function delay;

2. 参数说明：
   
   transition 属性是一个简写属性，用于设置四个过渡属性：transition-property |transition-duration |transition-timing-function |transition-delay
   
   值描述
   
   transition-property
   
   规定设置过渡效果的 CSS 属性的名称。
   
   transition-duration
   
   规定完成过渡效果需要多少秒或毫秒，要加单位。
   
   transition-timing-function
   
   规定速度效果的速度曲线。
   
   transition-delay
   
   定义过渡效果何时开始。

3. 补充说明tansition-timing-function: 属性规定过渡效果的速度曲线
   
   值描述
   
   linear规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
   
   ease规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
   
   ease-in规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
   
   ease-out规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
   
   ease-in-out规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
   
   cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

4. 案例说明
   
   div{
   
   width: 200px;
   
   height: 200px;
   
   background-color: red;
   
   /添加单个过渡效果/
   
   /transition:background-color 2s;/
   
   /也可以同时设置多个过渡效果/
   
   /transition:background-color 2s,left 1s;/
   
   /可以设置某个过渡效果的延迟/
   
   /transition:background-color 2s,left 1s 1s;/
   
   /可以设置过渡效果的速率曲线/
   
   /transition:background-color 2s,left 1s ease-out 1s;/
   
   /还可以一次性的为所有属性添加过渡效果/
   
   transition:all 1s;
   
   position: absolute;
   
   left: 0;
   
   top: 0;
   
   }
   
   设置多个用逗号分隔
   
   
   
   案例：手风琴菜单
   
   
   
   
   
   
   
   无法为一些状态值，如display:block添加过渡效果，只能为一些具体的值添加.
   
   过渡在事件触发完毕后（如点击后松开鼠标）会自动恢复原形
   
   5、transform2D转换

与transition类似，执行完毕后会自动回复原始位置。

2)scale



缩放时不影响其他元素

3）rotate



4）skew



如果角度为正，则往当前轴的负方向斜切，如果角度为正，则往当前轴的+方向斜切

5）origin



改变默认的旋转轴心

6）同时添加多个transform属性

多次设置transform属性值会出现覆盖现象

请使用空格分割、浏览器同时执行

但注意旋转会同时旋转当前的坐标系

所以一般先移动再旋转

限制元素宽度以自动换行

7）实现任意元素居中

首先进行子绝父相

6、3D变换

前3个参数将决定元素旋转的中心轴，表示的是一个向量值