Heluyao的博客 {11gz.com}

此文提供“靓图”对照，帮助记忆再加深印象。此文仅介绍几个可以说是比较“靠谱”的属性或值，其中包括有渐变、RGBA、文本阴影、Box 阴影、圆角。

渐变 gradient

background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));

webkit引擎下，5个参数值，记住每个都需要用“逗号”隔开就是了。

1. 渐变的类型? (linear)
2. 渐变开始的X Y 轴坐标(0 0 – 或者left-top)
3. 渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
4. 开始的颜色? (from(red))
5. 结束的颜色? (to(blue))

background: -moz-linear-gradient(top, red, blue);

Gecko引擎下，只有3个参数，linear已经放到了属性前缀中了。

1. 渐变从哪里开始? (top – 我们也可以使用度数，比如-45deg)
2. 开始的颜色? (red)
3. 结束的颜色? (blue)

background:linear-gradient(top, red, blue);

最后这个就是标准版本了，良好的前瞻是需要的。

还有几句要补充的：

如果你想设置超过2种以上的颜色渐变，那么可以这样写：

对于目前还没有支持css3的渐变的浏览器，比如IE、Opear，要记住在最前面写下一个简单的背景颜色(background-color)，否则看到的将是空白。

Firefox可以使用角度来设定渐变的方向，而webkit只能使用x和y轴的坐标。

最后，回到IE：

IE不支持CSS3渐变，不过好在IE有个渐变滤镜，可以实现最简单的渐变效果：

渐变的效果可能在每个浏览器里看起来都不相同，此乃正常现象。

————————————————-分割一下————————————————-

RGBA

R\G\B 分别指颜色值，a指透明度，0(透明)-1(不透明)。

只要是与颜色值有关的属性，都可以使用RGBA。

————————————————-分割一下————————————————-

文本阴影 text-shadow

x-offset(X轴距离), y-offset(Y轴距离), blur(阴影大小), color(阴影颜色)。

x-offset数值为正那么方向右，负则向左；y-offset数值正下负上。

可以为元素设置多重的阴影，中间用“逗号”隔开就行了。

————————————————-分割一下————————————————-

Box 阴影 box-shadow

与文本阴影(text-shadow)写法是一致的，唯一区别在于添加了box-shadow的同时还别忘了火狐(Gecko引擎)用-moz-，Safari、Chrome等WebKit引擎则添加-webkit-。

照样也支持多重阴影，中间用“逗号”隔开。

————————————————-分割一下————————————————-

圆角 border-radius

与边界、填充类似，也要区分火狐(Gecko引擎)，Safari、Chrome等WebKit引擎。

四个角可以设置不同值的，但要记得-moz-与-webkit-的区别。

原文地址：The Basics of CSS3

预览效果：demo

上图，可不是用画图软件制作的，而是浏览器生成。惊讶吧！css3的威力，巧妙的运用了圆角边框，阴影，背景渐变…等css3新特性。赞叹之余，我也亲自的动手制作了一下，就当学习一下了。以前了解过css3，但没动手写过，发觉有些属性还真是不好记，要区分三类浏览器(Gecko 、Presto、WebKit)，就越发的麻烦了。

其中不少地方的写法很新颖，充分的利用了伪类(before和after)，伪类配合绝对定位，双倍边框、椭圆、三角形等写法也很受教，真真切切体会到了css3的强大，希望css3时代早日到来。

原文地址：Pure CSS social media icons

推荐阅读：pure CSS speech bubbles

首先在前端开发的角度BS一下IE8，说什么支持CSS3，现在看来，前端开发的同鞋们还得等IE9，甚至可能IE10！因为大部分它还是没有支持，不过还是有个“安慰奖”滴！

CSS3是个好东西，能支持它的浏览器都是好样的！Safari, Firefox, Opera(支持部分)。好久没做笔记了！

note:

1. 去css3.info看看
2. 直接预览css带来的新体验
3. 不喜欢读洋文的，可以看看这里

这个css的升级，着实是帮了前端人员不小的“忙”，可惜的是浏览器们没赶上！不过，众多新加的功能中，个人认为真正有实用价值的也没几个！最有用的，当属“圆角(radius)”，其次“阴影(shadow)”、背景图像大小及数量(多背景)、嵌入字体(洋文的可能用得上)、透明度(opacity)、rgba等效果,剩下的就基本是华而无实了！最重要的，现在IE7、IE8都还和它们没“混熟”，默默期待吧！