CSS3.0的特效教程

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

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

<a href="http://www.sofchina.com/wp-content/uploads/2011/04/radius.png" title="radius" target="_blank" rel="noopener noreferrer"> </a><a href="http://www.sofchina.com/wp-content/uploads/2011/04/radius1.png" title="radius1" target="_blank" rel="noopener noreferrer"> </a>

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

<a href="http://www.sofchina.com/wp-content/uploads/2011/04/radius3png1.png" title="radius3png" target="_blank" rel="noopener noreferrer"> </a><a href="http://www.sofchina.com/wp-content/uploads/2011/04/radius4.png" title="radius4" target="_blank" rel="noopener noreferrer"> </a>

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

<a href="http://www.sofchina.com/wp-content/uploads/2011/04/shadow1.png" title="shadow1" target="_blank" rel="noopener noreferrer"> </a><a href="http://www.sofchina.com/wp-content/uploads/2011/04/shadow2.png" title="shadow2" target="_blank" rel="noopener noreferrer"> </a>

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

<a href="http://www.sofchina.com/wp-content/uploads/2011/04/shadow41.png" title="shadow4" target="_blank" rel="noopener noreferrer"> </a> <a href="http://www.sofchina.com/wp-content/uploads/2011/04/shadow3.png" title="shadow3" target="_blank" rel="noopener noreferrer"> </a>

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

<a href="http://www.sofchina.com/wp-content/uploads/2011/04/shadow7.png" title="shadow7" target="_blank" rel="noopener noreferrer"> </a><a href="http://www.sofchina.com/wp-content/uploads/2011/04/shadow6.png" title="shadow6" target="_blank" rel="noopener noreferrer"> </a>

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

<a href="http://www.sofchina.com/wp-content/uploads/2011/04/opacity.png" title="opacity" target="_blank" rel="noopener noreferrer"> </a><a href="http://www.sofchina.com/wp-content/uploads/2011/04/opacity2.png" title="opacity2" target="_blank" rel="noopener noreferrer"> </a>

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

<a href="http://www.sofchina.com/wp-content/uploads/2011/04/transform2.png" title="transform2" target="_blank" rel="noopener noreferrer"> </a><a href="http://www.sofchina.com/wp-content/uploads/2011/04/transform.png" title="transform" target="_blank" rel="noopener noreferrer"> </a>

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

<a href="http://www.sofchina.com/wp-content/uploads/2011/04/rotate2.png" title="rotate2" target="_blank" rel="noopener noreferrer"> </a><a href="http://www.sofchina.com/wp-content/uploads/2011/04/rotate.png" title="rotate" target="_blank" rel="noopener noreferrer"> </a>

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

<a href="http://www.sofchina.com/wp-content/uploads/2011/04/scale2.png" title="scale2" target="_blank" rel="noopener noreferrer"> </a>

<a href="http://www.sofchina.com/wp-content/uploads/2011/04/scale.png" title="scale" target="_blank" rel="noopener noreferrer"> </a>

原文地址：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