CSS3属性教程与案例分享

2019独角兽企业重金招聘Python工程师标准>>>

学习CSS3已有一年半之久了，虽然说不上很懂，但对于一些基本的属性使用还是有一定的了解。时常在群里有很多同学在索取有没有好的CSS3书，CSS3教程。其实如今学习CSS3还是相当的方便，最起码比起一年前来说是好很多很多。今天我把w3cplus的一些有关于CSS3的基本教程整理了一下，希望对同学们学习有所帮助。

CSS3选择器

选择器对于玩CSS的人来说，并不陌生，但对于CSS3选择器的使用，我想还是有很多同学没有体验过。在这里给大家准备了几篇基础性的教程：

1. 《CSS3基本选择器》
2. 《CSS3属性选择器》
3. 《CSS3伪类选择器》
4. 《CSS选择器优化》

CSS3基本属性

CSS3涉及的新知识是非常的多，在学习笔记中我也是东一榔头西一棒的，大家在w3cplus找起相关资料也是不太方便，今天我也稍加整理了，把一些基础属性的相关教程罗列出来：

1. 制作渐变图片：《CSS3 Gradient》
2. 制作透明色：《CSS3 RGBA》
3. 制作圆角：《CSS3 Border-radius》
4. 制作文字阴影：《CSS3 Text-shadow》
5. 制作盒子阴影：《CSS3 Box-shadow》
6. 制作变形、移位、扭曲等效果：《CSS3 Transform》
7. 制作动画平滑过渡效果：《CSS3 Transition》
8. 制作动画效果：《CSS3 Animation》
9. 控制边框颜色：《CSS3 Border-color》
10. 制作图片边框：《CSS3 Border-image》
11. 截取文本：《CSS3 Text-overflow》
12. 控制文本断行效果：《CSS3 Word-wrap》
13. 盒模型新概念：《CSS3 Box-sizing》
14. 制作特殊字体：《CSS3 @font-face》
15. 背景尺寸：《CSS3 Background-size》
16. 背景裁剪：《CSS3 Background-clip》
17. 背景原点：《CSS3 Background-origin》
18. 制作多背景：《CSS3 Multiple Backgrounds》
19. 多列属性之跨列：《CSS3 Multi-columns》
20. 多列属性之列数与列宽：《CSS3 Multi-columns》
21. 多列属性之列间距：《CSS3 Multi-columns》
22. CSS媒体：《CSS3 Media Queries》

上面的教程还没有完全汲及所有CSS3的属性，不过感兴趣的同学可以先学习，我们将会在后期继续完善有关于CSS3方面的教程

CSS3相关方面案例

前两个都是理论，当然在教程中也附有不少的实例，但还不是很全面，在这一块上，我也整了部分相关的实例教程，希望大家喜欢：

1. 《CSS3制作文字特效》
2. 《CSS3 Gradient Buttons》
3. 《CSS3制作Tabs选项卡》
4. 《CSS3 Tips》
5. 《CSS3制作Drop Shadow效果》
6. 《CSS3 Ribbons》
7. 《CSS3制作垂直手风琴》
8. 《CSS3美化表格》
9. 《CSS3动画集——Animate.css》
10. 《CSS3制作Apple官网的Seach Box效果》
11. 《CSS3制作超酷的SearchBox》
12. 《玩转CSS3颜色》
13. 《CSS3制作Progress Bars》
14. 《CSS3制作日历》
15. 《CSS3制作留言墙》
16. 《CSS3制作Breadcrumbs》
17. 《CSS3制作动画加载页面》
18. 《CSS3制作分享按钮》
19. 《CSS3制作3D分页导航》
20. 《CSS3美化有序列表》
21. 《CSS3制作iPhone的Checkbox》
22. 《CSS3制作菜单的Hover效果》
23. 《CSS3制作表单动态帮助信息》
24. 《Pure CSS3 Ribbons》
25. 《@font-face制作Web Icon》
26. 《CSS3 Media Queries案例——Tee Gallery》
27. 《CSS3 Media Queries案例——Hicksdesign》
28. 《CSS3 Media Queries案例——A List Apart》

前面列出的是w3cplus有关于CSS3方面的属性教程和一些实例，如果大家对CSS3非常感兴趣的话，可以到W3cplus的DEMO站点学习或下载更多有关于CSS3方面的案例。

转载此文烦请注明出处：http://www.w3cplus.com

转载于:https://my.oschina.net/w3cplus/blog/77641