1、background:linear-gradient(to top,blue,red) 兼容写法:background:-wbkit-linear-gradient(bottom,blue,red)
2、gradient分为linear-gradient(线性渐变)和radical-gradient(径向渐变),重复的线性渐变:repeat-linear-gradient(),重复的径向渐变repeat-radical-gradient()
3、radical-gradient( circle,20px 30px,red,blue)中的20px 30px 指的是圆心的水*和垂直位置 linear-gradient(20px 30px,red,blue)中的20px 30px 指的是渐*的水*和垂直半径
4、线性渐变
a、从上到下(默认情况下):background:linear-gradient(red,blue);
b、从左到右:background:linear-gradient(to right,red,blue);
c、对角:background:linear-gradient(to bottom right,red,blue)
5、径向渐变
a、颜色节点均匀分布(默认情况):background:radical-gradient(green,red,blue);
b、颜色节点不均匀分布:background:radical-gradient(green 15%,red 5%,blue 60%);
c、设置形状:background:radical-gradient(circle,green,red,blue);
(8)模糊和倒影
1、模糊:filter:blur(10px)
2、倒影(只有webkit内核支持,目前仅在Chrome,Safari,opera浏览器下支持)
-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));
3、用线性渐变给图片加遮罩效果;用于遮罩的图片必须是png格式;
(9)动画(css3属性中有关制作动画的三个属性transition,transform和animation)
1、transition
a、transition-property:需要过渡的样式
b、transition-duration:运动时间
c、transition-delay:延迟时间
d、transition-timing-function:运动形式 ease(默认,慢速开始,然后变快,然后慢速)/linear(匀速)/ease-in(快速)/ease-out(减速)/ease-in-out(先加速后减速)/cubic-bezier(x1,y1,x2,y2)贝塞尔曲线
e、steps:实现一个关键逐帧动画功能
2、transform属性向元素应用2D,3D效果,该属性允许我们对元素进行旋转,缩放,移动和倾斜
a、translate()根据x轴和y轴位置给定的参数,从当前位置移动 transform:translate(-150px -150px);
b、rotate()根据给定度数顺时针旋转,负值是允许,这样会逆时针旋转
c、scale 默认为(1,1),进行图片缩放,给负值时,会先旋转再缩放
d、skew 倾斜
f、transform-origin:改变元素基点位置,当有3个参数时,第三个参数只能是数字+单位,不能用left/center/right
3、3D涉及到的属性
a、transfrom-style:指定嵌套元素如何在3D空间中呈现(加在父元素上)
transform-style:flat(表示所有子元素在2D*面呈现)/perserve-3d(表示所有子元素在3D*面呈现);
b、perspective:none/<length>;perspective取值为none或不设置,没有真3D空间;perspective取值越小,3D效果越明显;
c、perspective-origin:决定看东西的角度
d、backface-visibility:visible/hidden;决定背面是否可见
4、animation和@ikeyframes一起用,支持animation动画的只有webkit内核
a、animation-property:需要过渡的样式
b、animation-duration:运动时间
c、animation-delay:延迟时间