CSS3特殊效果

标签：

CSS3，html5：各种属性，有酷炫的效果

兼容性问题：政府大多数政府机构都是用的IE6.7，所以很多时候要兼容IE6.7，IE连PNG格式都不支持

margin：本身有兼容性问题，在其他地方可能有问题
padding：内边距还好一些

APP端只有一个兼容性问题，屏幕，
要自适应屏幕
两种方法：（腾讯的autoSize,js）
（metaholder.js 连rem都可以不用，用px都可以）

手机端只有屏幕兼容性问题，所以常用CSS3，html5

CSS3扩展：浏览器有兼容性问题，有些可以在浏览器加使用前缀：
-webkit- 谷歌和苹果
-o- 欧朋
-moz- 火狐
-ms- IE9

CSS3的标准写法都要加上前缀，直接写5条，加上本身的那一条，因为不加上很多浏览器就是有兼容性问题

各种CSS3属性：

1、点击图片的hover效果：
图片蒙版：现在不常用，遮盖效果
图片翻转：
div{
width: 168px;
height: 81px;
border: 1px solid red;
overflow: hidden;
transition: all 1.5s linear;
}
img{
transition: all 1.5s linear;
}
div:hover{
transform: rotateY(180deg);
}
div:hover img{
transform: rotateY(180deg);
}
}

图片放大：

2、边框圆角：-moz-border-radius:25px; /* Old Firefox */

3、边框阴影：box-shadow: 10px 10px 5px #888888;水平阴影，垂直阴影，模糊值，颜色
还可以设置各种颜色，向内（负值）向外阴影

4、背景，background-size，适应性非常好，常用。

5、文本：text-shadow，和边框阴影

6、CSS转换，2D，3D转换
CSS3 转换：对元素进行移动、缩放、转动、拉长或拉伸。
转换是使元素改变形状、尺寸和位置的一种效果。

具体看API，

7、过渡效果
应用，进度条，慢慢放大缩小，旋转放大等效果

8、动画效果
以前用flash，但是要收版权费，现在都没有用了

CSS3的效果可以重一种样式转换为另一种样式的效果，可以使用任意多动画任意次数

CSS3特殊效果

标签：

原文地址：http://www.cnblogs.com/chenyuanqiu2008/p/5463986.html