令人兴奋的CSS3

在对于CSS3和HTML5这些令人兴奋的并且实用的web技术迅速发展的几年。这篇文章将为大家阐述CSS3优秀图形的技术和性能，您将学习到可能被视为最终批准的规范中的一部分，和如何处理跨浏览器的不兼容和老的浏览器的不支持。准备好了吗，让我们现在开始。

介绍CSS3

CSS3是一个模块集，扩展了以前的CSS2规范。本文所讨论的图形技巧，大部分来自背景和边框模块。还有一点要记住，CSS3现在依然处于过渡阶段，不能因为现在最新的浏览器支持这些功能，而期望所有都浏览器能很快的支持它。

CSS3为我们带来了什么

当现在设计师们拥有着越来越多的新奇想法，加上浏览者更多追求华丽的表演。往往一个简单的图形设计就会让我们使用大量的代码来实现。CSS3的出现提出一些新的特性，使行我们更为容易的加强了对图形效果在创建代码上的权力。这些包括（点击图片示例，查看代码）

Shadows（阴影）

最近很多设计者开始习惯了这样事：你可以方便的添加本文的阴影。虽然IE还不支持text-shadow属性，但Safari、Firefox和chrome已经支持一段时间了。但真正令人兴奋的事是你可以使用box-shadow的属性来控制对box的阴影的变化。

Gradients（渐变）

首先这一个纯CSS示例，没有用到任何一张图片。因为还处于一个发展阶段，CSS3的渐变还没有成为一个标准的语法，但日前在WebKit (Safari, Chrome.)当然还有Firefox上已经可以使用了。

Borders with Rounded Corners（圆角框）

css已经可以对边框的类型提供一些选择(double, inset, dotted,等)，但现在我们已经有能力对边框的每个角半径做出更多的控制 。是的，现在的圆角并不是用javascript和一些图片来实现，而是通过CSS3，更为简单且有效的方式来处理。

如何来设计块

首先我们一定先考虑到，采用最新的CSS3就会造成一部使用老版浏览器用户的兼容。但考虑到CSS3那些新的特性，对视觉的选择，还是要看你对用户的把握。如果你觉还不错，随着现在浏览器快速的更新，我相信CSS3还是一个不错的选择。

对于今天的示例，我们主要通过三个阶段来为我们加上这些风格。

从基本的开始

.styledbox {
background-color: #fed;
border-top: solid 1px white;
border-bottom: solid 1px #669;
padding: 10px 18px 10px 18px;
color: black;
font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
font-size: 10pt;
margin-bottom: 10px;
}

这是一段基本的代码，首先让我们先写一个div并在里面加上一些文本。你会看到一些基本的外观。

加上圆角

当开始使用这些代码，我们就会需要考虑对多种浏览器的支持，比如chrome，我们将开始使用WebKit版本。

-webkit-border-radius: 8px

哈，现在可以看到已经是圆角了，接下我们要比Gecko的支持（firefox）。

-moz-border-radius: 8px

border-radius: 8px

现在仍需要加上各个引擎版本的前缀。

如果你想对每一个角做更的样式，可以用border-[top-left|bottom-right|等]-radius 来定义 。注意，对于Gecko来说会有一些不同，可以用-moz-border-radius-topleft, 等…

加上阴影

现在我们要为其加上阴影，如果你之前使用过text-shadow的话，这个语法就会很面熟。

-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);

这里我们能看出，我使用的不是典型的十六进制法来表示颜色，而是使用的新rgba的方法。前三个整数代表了RGB三个颜色值（取值为0~255的色彩范围），但最后一个十进制值从0.0~1.0代表α值（其义是不透明度）。半透明是这里必要的选项，让我们创造出阴影的效果。

再次，别忘了代替版本。

-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
box-shadow: 0px 1px 3px rgba(0,0,0,0.7);

加上渐变

好了，这里有一个比较棘手的问题。对于渐变，webkit和Gecko在定义并不是像上面那样看上去比较类似。导致我们不得不在两种浏览器上来回切换，使我们得到相同的结果。

这里是webkit的写法

background: -webkit-gradient(
            linear,
            center top, center bottom,
            color-stop(0%, #fffffa),
            color-stop(30%, #fed),
            color-stop(80%, #fed),
            color-stop(100%, #fffffa)
            );

这里每一个color-stop都可以用百分比或位置的值（如PX）来定义，这样可以规范化每一个box。

对于Gecko，我们可以用更少的代码来实现。

background: -moz-linear-gradient(

top, #eef, #cce 30%, #cce 80%, #eef 100%

);

我推荐再做好webkit的再现Gecko的。这里有三种颜色，浏览器会逐行进行解释。

这里是Demo和代码。

额外讲解：加上背景图片

正如你所看到的，最终的效果是很漂亮的。但我们还能不能创作出把带有渐变和α-透明的背景用在图片呢。答案是：是的。

background: -webkit-gradient(

linear,

center top, center bottom,

color-stop(0%, rgba(255,255,255,0.8)),

color-stop(30%, rgba(255,255,255,0))

), url(http://www.siteshine.com/images/tan_background.jpg);

background: -moz-linear-gradient(

top, rgba(255,255,255,0.8), rgba(255,255,255,0) 30%

), url(http://www.siteshine.com/images/tan_background.jpg);

主要是在定义的代码后面加一个,再指定一个url。就可以做出这个漂亮的效果了。

设计窗体样式

一般来说，窗体的设计不会由CSS来控制（更多的采用本身OS的UI）。

这里是一个例子，使用CSS3来控制的表单设计。

一个很酷的是，这里我用了一个“外发光”样式在这里。

这里我还创建一个按钮，使用的是span这个标签。

<p>Here is some text. <span>Click Me</span> And more text.</p>

对于旧浏览器怎么办

重点对于一些旧浏览器和特殊的IE，我们应该怎么办。一些设计者为了给用户更好的视觉体验，避开了所有使用图像来代替CSS3的方式，其他的设计师则可能是费尽心力的投入，而使用户体会不到CSS3带来的视觉设计。

我的建议是，你可以第一次使用标准CSS2语法来设计网页，如果你找到一个可以接受的地方，可以对其添加CSS3带来的华丽的效果，如果没有找到可以接受的底线，那么还是去采用老式的方式。不过随着浏览器快速发展，和CSS3的标准化的到来，我相信，CSS3这个简单而实用的方式，将会更加普及。

总结

CSS3结束我们对图形设计上很多头痛的问题，同时也成为了一个开发设计的伟大的工具，用来营造一个奇妙的效果和独特的视觉风格。虽然在兼容性还存在一些问题，但对于那些一直用Photoshop和晦涩的Html/Css来实现这些图形效果的人，这样日子在一点点的远去了。

background: -moz-linear-gradient(top, #eef, #cce 30%, #cce 80%, #eef 100%);

转载自： http://woshao.com/article/803057e46c3911dfb2e2000c295b2b8d/