在css1中,样式通常是基于在html源代码中出现的标记和属性。对于很多设计情景而言这种做法完全可行,但是它无法实现设计者希望获得的一些常见的设计效果。
浏览器前缀:
css3属性:预览版,还没有最终版,所以有很多兼容性问题,浏览器不识别。
浏览器为了使这些属性兼容,每个浏览器厂商都提供了一个属于自己浏览器的语法规则,浏览器兼容前缀。
主流浏览器:谷歌,IE,欧朋,火狐,苹果
浏览器前缀:
-wekit- 谷歌
-moz- 火狐
-ms- IE
-o- 欧朋
盒子阴影:
box-shadow:0px0px0px0pxred;
水平偏移量,垂直偏移量,模糊度,影子大小,颜色
css3渐变:由浏览器生成,
线性渐变:
1、单一方向渐变
background:-wbkit-linear-gradient(方向,颜色1,颜色2,颜色3);
方向:
left从左边开始
right从右边开始
top从上边开始
bottom从下边开始
【注】需要添加浏览器前缀
background:linear-gradient(to方向,颜色1,颜色2,颜色3);
toleft到左边(结束)
toright
totop
tobottom
【注】不要添加浏览器前缀
2、对角渐变
background:-wbkit-linear-gradient(方向方向,颜色1,颜色2,颜色3);
lefttop从左上角到右下角渐变
leftbottom
righttop
rightbottom
【注】需要添加浏览器前缀
background:linear-gradient(to方向方向,颜色1,颜色2,颜色3);
tolefttop
toleftbottom
torighttop
torightbottom
【注】不要添加浏览器前缀
3、角度的渐变
10deg10度
4、默认情况下颜色均分
可以指定颜色分布的百分比
background:-wbkit-linear-gradient(left,red10%,green40%,blue);
从10%开始渐变,前10%都是red
background:linear-gradient(toleft,red10px,green,blue);
从10px处开始渐变,前10px都是red
径向渐变:(一定要加浏览器前缀)
从一个点到四周的渐变
background:-wbkit-radial-gradient(渐变位置,形状,大小,颜色1,颜色2,颜色3);
渐变位置:默认从中心到四周
left从左边渐变
right
top
bottom
lefttop从左上角到四周渐变
leftbottom
righttop
rightbottom
形状:默认椭圆 ellipse
正圆 circle
【注】元素是正方形,则都是正圆
大小:size,渐变的大小,即渐变到哪里停止,它有四个值
closest-side:最近边;
farthest-side:最远边;
closest-corner:最近角;
farthest-corner:最远角;
渐变重复:
线性渐变
background:repeating-linear-gradient(toleft,black10%,white20%);
-wbkit-background:repeating-linear-gradient(right,black10%,white20%);
径向渐变
background:repeating-radial-gradient:(right,black10%,white20%);
【注】渐变用的背景属性是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
二维的平面空间
css32d属性
变形属性transform:;
2d变换
位移
transform:translate(水平位移,垂直位移); 一个值默认只有水平位移
transform:translateX(10px); 水平位移
transform:translateY(10px); 垂直位移
【注】正值,从上往下从左往右
旋转
transform:rotate(); 默认中心旋转
transform-origin:lefttop; 设置旋转基点
transform-origin:5px10px;
缩放
transform:scale(水平垂直都缩放的倍数); 一个值
transform:scale(水平缩放,垂直缩放); 两个值
transform:scaleX(水平缩放);
transform:scaleY(垂直缩放);
CSS的识别符也需要用反斜杠"\\"规避特殊字符,这些规避字符遵循IS010646规范。特殊字符的规避方法有两种:第一种方法是遇到特殊字符则在这些字符前直接添加反斜杠,例如,"AT&T"变为"AT\\&T";另一种方法为用反斜杠和Unicode或IS010646等值的十六进制数值一起,规避特殊字符,例如,"AT&T"变为"AT\\26T"。