最近花时间看了下CSS3，下面列出一些例子供大家参考，Web欢迎大家探讨 o(∩_∩)o

其中“ -moz- ” 一般指火狐的写法，“ -webkit- ” 一般指webkit内核浏览器的写法.
1、border-radius 实现圆角效果，只需一行CSS代码便可以实现，支持众多浏览器，当然不支持IE。

![圆角](http://www.sofchina.com/wp-content/uploads/2011/04/radius.png) ![圆角](http://www.sofchina.com/wp-content/uploads/2011/04/radius1.png)

2、border-top-left-radius设置圆角各个角的半径值（不支持IE）

![](http://www.sofchina.com/wp-content/uploads/2011/04/radius3png1.png) ![](http://www.sofchina.com/wp-content/uploads/2011/04/radius4.png)

3、box-shadow实现阴影效果(不支持IE)

![](http://www.sofchina.com/wp-content/uploads/2011/04/shadow1.png) ![](http://www.sofchina.com/wp-content/uploads/2011/04/shadow2.png)

4、css3实现阴影和圆角完美结合

![](http://www.sofchina.com/wp-content/uploads/2011/04/shadow41.png) ![](http://www.sofchina.com/wp-content/uploads/2011/04/shadow3.png)

5.text-shadow实现多重阴影效果。

![](http://www.sofchina.com/wp-content/uploads/2011/04/shadow7.png) ![](http://www.sofchina.com/wp-content/uploads/2011/04/shadow6.png)

6.opacity实现背景透明度（不支持IE）

![](http://www.sofchina.com/wp-content/uploads/2011/04/opacity.png) ![](http://www.sofchina.com/wp-content/uploads/2011/04/opacity2.png)

7.transform:skew()将元素产生透视效果

![](http://www.sofchina.com/wp-content/uploads/2011/04/transform2.png) ![](http://www.sofchina.com/wp-content/uploads/2011/04/transform.png)

8.transform:rotate(度数) 将元素旋转X度

![](http://www.sofchina.com/wp-content/uploads/2011/04/rotate2.png) ![](http://www.sofchina.com/wp-content/uploads/2011/04/rotate.png)

9、transform:scale(倍数)实现放大缩小。

![](http://www.sofchina.com/wp-content/uploads/2011/04/scale2.png) ![](http://www.sofchina.com/wp-content/uploads/2011/04/scale.png)

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