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的效果可以重一种样式转换为另一种样式的效果，可以使用任意多动画任意次数

转载于:https://www.cnblogs.com/chenyuanqiu2008/p/5463986.html

原文地址：https://blog.csdn.net/weixin_30808575/article/details/95343772?ops_request_misc=&request_id=7c3a0a7c6c264218995b401c42e60581&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-25-95343772-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88