浏览器前缀:
css3属性:预览版,还没有最终版,所以有很多兼容性问题,浏览器不识别。 浏览器为了使这些属性兼容,每个浏览器厂商都提供了一个属于自己浏览器的语法规则,浏览器兼容前缀。 主流浏览器:谷歌,IE,欧朋,火狐,苹果 浏览器前缀: -wekit- 谷歌 -moz- 火狐 -ms- IE -o- 欧朋
盒子阴影: box-shadow:0px 0px 0px 0px red; 水平偏移量,垂直偏移量,模糊度,影子大小,颜色 css3渐变:由浏览器生成, 线性渐变: 1、单一方向渐变
background:-wbkit-linear-gradient(方向,颜色1,颜色2,颜色3); 方向: left 从左边开始 right 从右边开始 top 从上边开始 bottom 从下边开始 【注】需要添加浏览器前缀 background:linear-gradient(to 方向,颜色1,颜色2,颜色3); to left 到左边(结束) to right to top to bottom 【注】不要添加浏览器前缀
2、对角渐变
background:-wbkit-linear-gradient(方向 方向,颜色1,颜色2,颜色3); left top 从左上角到右下角渐变 left bottom right top right bottom 【注】需要添加浏览器前缀 background:linear-gradient(to 方向 方向,颜色1,颜色2,颜色3); to left top to left bottom to right top to right bottom 【注】不要添加浏览器前缀
3、角度的渐变
10deg 10度
4、默认情况下颜色均分
可以指定颜色分布的百分比 background:-wbkit-linear-gradient(left,red 10%,green 40%,blue); 从10%开始渐变,前10%都是red background:linear-gradient(to left,red 10px,green,blue); 从10px处开始渐变,前10px都是red 径向渐变:(一定要加浏览器前缀) 从一个点到四周的渐变 background:-wbkit-radial-gradient(渐变位置,形状,大小,颜色1,颜色2,颜色3); 渐变位置:默认从中心到四周 left 从左边渐变 right top bottom left top 从左上角到四周渐变 left bottom right top right bottom 形状:默认椭圆 ellipse 正圆 circle 【注】元素是正方形,则都是正圆 大小:size,渐变的大小,即渐变到哪里停止,它有四个值 closest-side:最近边; farthest-side:最远边; closest-corner:最近角; farthest-corner:最远角; 渐变重复: 线性渐变 background:repeating-linear-gradient(to left,black 10%,white 20%); -wbkit-background:repeating-linear-gradient(right,black 10%,white 20%); 径向渐变 background:repeating-radial-gradient:(right,black 10%,white 20%); 【注】渐变用的背景属性是background-image:; 过渡:让元素的动画产生平滑的效果 1、什么属性在做动画 transition-property:属性1,属性2,...; 2、过渡时间需要多久 transition-duration:0.5s; 3、延迟时间(选写) transition-delay:2s; 4、动画类型(默认匀速) transition-timing-function:; 综合写法: transition:all/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型
css3中的2d 二维的平面空间
css3 2d属性
变形属性transform:; 2d变换
位移
transform:translate(水平位移,垂直位移); 一个值默认只有水平位移 transform:translateX(10px); 水平位移 transform:translateY(10px); 垂直位移 【注】正值,从上往下从左往右
旋转
transform:rotate(); 默认中心旋转 transform-origin:left top; 设置旋转基点 transform-origin:5px 10px;
缩放
transform:scale(水平垂直都缩放的倍数); 一个值 transform:scale(水平缩放,垂直缩放); 两个值 transform:scaleX(水平缩放); transform:scaleY(垂直缩放);
倾斜: transform:skew(水平倾斜); 一个值 transform:skew(水平倾斜,垂直倾斜); 两个值 transform:skewX(); transform:skewY();
|