你的位置:首页 > 网页设计

[网页设计]CSS3学习笔记


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

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

目录:

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

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

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

圆角矩形是我们在平时用的比较多的样式,这里我参考了《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 可下载。