CSS3学习笔记

最近在学习css3，以下是我在学习过程中，边学编写的一个demo。刚学的知识容易忘掉，所以写下这篇博客便于以后回顾查看，同时也是对所学知识的输出总结。本篇博客只是我在学习过程的模仿练习，参考了网上其他很优秀的博客都有链接，特别感谢菜鸟教程。

之前是太懒了，每次学习新知识不知道总结，遇到不会的问题就上网查，没有记录的习惯。这样对于某个知识点，当时可能懂了，但是过后很容易就忘了，不能成为自己的东西。前几天在微信读了一篇文章《揭秘高手拼命写博客的原由》，有所醒悟了，于是决定以后也要坚持写博客，督促自己成长。

目录：

1. 圆角
2. 投影
3. 边框
4. 背景样式
5. 渐变
6. 文本效果
7. 2D旋转
8. 3D旋转
9. 3D动画
10. 文本分列显示
11. 用户界面

这里面用到参考了很多大神的博客，我也都列举出来。

对于各种浏览器，css样式里面需要单独写出带各自前缀的样式，可以参考《浏览器内核分类 》，《css3前缀》，《CSS3那些不为人知的高级属性》，而浏览器之间兼容性的问题可以参考《css兼容性问题的整理》。

圆角矩形是我们在平时用的比较多的样式，这里我参考了《CSS3 经典教程系列：CSS3 圆角（border-radius）详解》，题外话据说这篇博客的作者——梦想天空，是为真正的“大牛”。我很多问题都参考了他的。

投影也是很常用的功能，我也是参考了梦想天空的《CSS3 经典教程系列：CSS3 盒阴影（box-shadow）详解》。还有这篇《CSS3阴影 box-shadow的使用和技巧总结 》。

边框我参考了《CSS3实例教程:border-image属性实例讲解》，《css3:border-image边框图像详解》。

背景样式参考《CSS3 Background-size》，《CSS 背景(css background)》。

渐变样式可以参考《CSS3 Gradient》，还有大神的这篇《CSS3 经典教程系列：CSS3 线性渐变（linear-gradient）》。

文本样式可以参考《CSS3之文字阴影text-shadow》，《CSS3的文字阴影—text-shadow》。

剩下的可以参考这些博客：Airen的博客 ｜  梦想天空  ｜ CSS3教程-DIV CSS3教程栏目  　｜  CSS3 教程   ，很值得学习，非常感谢！！

 

我练习时所写的：　demo　可供下载。

原文链接：https://www.cnblogs.com/yetbobo/p/4627722.html