您的位置:首页 > Web前端 > CSS

CSS3学习笔记

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

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

目录:

圆角

投影

边框

背景样式

渐变

文本效果

2D旋转

3D旋转

3D动画

文本分列显示

用户界面

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

对于各种浏览器,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 可供下载。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: