360UXC-快乐CSS3之旅

Hello！everybody！对于CSS3的应用一直是前端的痛。因为国内浏览器IE、IE内核浏览器市场份额实在是太大，对于既想优雅的使用CSS3来实现复杂的页面效果，又不得不考虑国内的情况。苦逼的前端开发人员只能继续使用古老的图片来实现圆角、背景、渐变的效果。

如果你是一个具有探索性的前端攻城师，那么就用CSS3来实现吧！既能锻炼CSS3新的属性，同时对自己的技术不断提高，帮助CSS3应用的推广；也能够实现IE系列的兼容。不过这个过程很痛苦。你得和PM一顿解释为什么这样实现，又得折腾更多的代码！这太苦逼了！可是我们是一群经得起的前端攻城师！！ 哈哈~！

对了！本文的一些实例是我做项目中运用到的！主要针对Chrome内核制作开发。故我很幸福哦….而且很是兴奋兴奋滴说！

CSS3 Transition的应用

语法：

取值：

[ transition-property ]：检索或设置对象中的参与过渡的属性
[ transition-duration ]：检索或设置对象过渡的持续时间
[ transition-timing-function ]：检索或设置对象中过渡的动画类型
[ transition-delay ]：检索或设置对象延迟过渡的时间

复合属性。检索或设置对象变换时的过渡。

PS:摘自CSS参考手册

想更多的了解，去看手册吧！这是最好学习的地方哦！

好啦~我们来看个运用实例吧！

首先，看到这个设计图稿时，可能一些人，这个有什么地方可用到transition？童鞋！看到那个红框向上的箭头么？这个是要有交互效果滴！

即:滑进时，图片向上走，显示右边图片的所展示的部分。

嗯，现在看代码了哦~！

这是结构代码

CSS3主要代码：

其中触发的动作就是.ext-block:hover { top:-95px;}

这两句就能实现鼠标滑入时，图片上滑，然后显示其他的。这个省了好多js吧！哈哈！可能有些人说：语法是四个参数，为什么你就写了三个？这个…看手册吧！

CSS3 Box-shadow的应用

语法：

默认值： none

取值：

none：无阴影
<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④：如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值
：设置对象的阴影的颜色。
inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影

PS:摘自CSS参考手册

同样以Transition里的图片为例。
当滑入时，显示阴影。
结构代码一样，主要来看下CSS代码：

Box-shadow:0 0 3px #ddd;这里为什么不用私有属性，因为chrome已经完全支持啦。
其中第四个参数值基本用不到。
这样就实现了滑入时，显示阴影。而不用苦逼的切背景图了。有时可能IE6用PNG24位的透明图片来处理时，苦逼的出现灰色色块。

CSS3 Border-radius的应用

语法：

默认值：0
取值：

<length>：用长度值设置对象的圆角半径长度。不允许负值
<percentage>：用百分比设置对象的圆角半径长度。不允许负值

说明：
设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数
水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
如果只提供一个，将用于全部的于四个角。
如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。
如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。
垂直半径也遵循以上4点。

PS:摘自CSS参考手册

这张截图，按钮的圆角用的border-radius来实现的，不用苦逼的用图片做拼合了。
以下为实现的结构代码和CSS3代码：

border-radius:2px；这个是实现了四个角是圆角啦！简单吧？

顺便说下，这张图的三态，完全可以用CSS3来解决。其中的圆角，阴影，文字阴影，内阴影，背景渐变等都是用CSS3来实现的。这块的CSS代码已经给出了哦！自己可以看下！其中文字阴影和box-shadow类似。

CSS3 Background渐变的应用

语法：

默认值：none
取值：

none：无背景图。
<url>：使用绝对或相对地址指定背景图像。
<linear-gradient>：使用线性渐变创建背景图像。（CSS3）
<radial-gradient>：使用径向(放射性)渐变创建背景图像。（CSS3）
<repeating-linear-gradient>：使用重复的线性渐变创建背景图像。（CSS3）
<repeating-radial-gradient>：使用重复的径向(放射性)渐变创建背景图像。（CSS3）

说明：
设置或检索对象的背景图像。
如果设置了background-image，同时也建议作者设置background-color用于当背景图像不可见时保持与文本一定的对比。

PS:摘自CSS参考手册

同样以上面按钮图片来做实例。给的样式代码是简写了。没有用background-image，而用background，效果是一样滴！只是这个是用于线性渐变。具体的语法规则请参考手册吧！

	.download-btn { position:absolute; right:10px; top:50%; margin-top:-13px; width:138px; height:26px; line-height:26px; border:1px solid #2d53af; border-radius:2px; box-shadow:inset 0 1px 1px #6e9ae0, 0 1px 2px rgba(0,0,0,0.3); background:-webkit-linear-gradient(#5588da,#4d7bd6); color:#fff; font-size:14px; font-weight:700; text-shadow:1px 1px 0 rgba(0,0,0,0.3); text-align:center;}

这就是三态时，不同的渐变背景色的运用！只是这用了webkit的私有属性。这个就不用我解释了吧？类似transition。

以上这些是比较基本而且常用到的一些CSS3新的特性来开发项目。在CSS3的运用上，我们还有很长的路要走，毕竟现在国内市场做前端的很痛苦！

忘记说了，这个是项目是我在360极速浏览器扩展中心运用到的一些效果，上线后我去看了下，其中的Transition效果去掉了，采用js来实现。这个具体情况不清楚，可能他们考虑的更多吧！毕竟极速现在是两个内核（IE内核）哦！按钮的也弄成图片，这个我能理解。因为在里面增加了个“+”号！这个东西用文本来控制确实不好实现，在不同系统下、不同字体下会变形。不过好多地方的一些运用还是存留滴，像阴影什么还在。顺带说句，里面也用到了CSS3的display:box；布局！这个很有意思！有兴趣的可以去了解下。