（英文水平有限，翻译诸多错误，望海涵）

css3带来了很多令人兴奋的新应用和新特征：文本阴影，盒模型结构，透明特性，多重背景，边框半径，等等……
css3带来了更大的灵活程度并且使得重建之前复杂的效果变得更加简单。并不是所有现行的浏览器都支持css3，但是无论怎样他依然可以凭借jQuery的力量制造出相当的影响和服务。
这篇文章带来五个令人注目的技术，由于css3无法被很多浏览器很好的兼容，所以以下介绍了使用jQuery来完成类似于css3里面新技术的方法。

1.边框半径：创建圆角边框
W3C在css3里提供了一些很令人感兴趣的边框选项，其中一个就是边框半径。css3样式规则允许设置出圆角。Firefox和Safari3
都能够支持这个功能，他们都能够允许用户在盒道具上创建出圆角效果。

使用以下的css代码就可以创建出上图的效果：

#rounded-box {
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 15px;
}
在下面 中你会看到jQuery可以不运用图片的方式让你创造出圆角效果。

How
To » jQuery Canvas Rounded Corners

jQuery使用<canvas>元素在DOM目标上创建圆角效果。在IE7和FF中均支持。

你可以改变以下选项：
radio – (int) 圆的半径
inColor – (color) 元素内部的颜色
outColor – (color) 元素外部的颜色
borderSize – (int) 边框宽度
borderColor – (color) 变宽颜色

How To
» jQuery Corners

jQuery plugin 更容易的创建圆角。不需要图片或者刺眼的梯形模拟。

2.边框图片
另一个令人激动的css3新特性是边框图片特性。边框图片一个图片被用作边框元素。每边的图片相当于那一边的HTML对象。

目前，边框图像只能在FF3.1和最近版本的Safari和Chrome中被识别。在下面你会看到一个复杂的jQuery解决方案，以使得这中效果在Firefox
2.*, Firefox 3, Firefox 3.1, Safari 3.*, Chrome 1.0, Opera 9.*,
Opera 10和 IE7中显示。

How To » jquery.borderImage.js

jquery.borderImage是跨浏览器的部分执行css3中图片边框效果的应用。这个plugin通过九宫格切割能够创建出和图片边框一样的效果，然后再运用背景元素围满。

3.多背景
css3允许一个元素运用多个背景，这简直是时间挽救者。要做到这一点，你需要把你的背景地址用逗号隔开：

#multiple-background-box
{
background: url(top-bg.gif) top left no-repeat,
url(bottom-bg.gif) bottom left no-repeat,
url(middle-bg.gif) left repeat-y;
padding: 20px;
}
这个特性目前还无法被大多数浏览器支持，如果你想要在一个div标签里得到多背景效果，那么你不得不运用div嵌套，并给与不同的背景。这使得代码量变大，并且很缺乏效率。使用jQuery背景层插件就是一个解决方案。

How To » CSS Multiple Backgrounds / Background
Layering with jQuery

使得你的代码更加灵活。这个想法是类似于Photoshop里层的概念，既一个背景在另一个之上。
<script type=”text/javascript”
src=”/includes/jquery.background_layers.js”></script>
<script type=”text/javascript”>
$(function(){
$(‘.marioBox’).add_layer(“#A4D3FF”);
$(‘.marioBox’).add_layer(“url(‘/images/mario_floor.gif’) no-repeat
bottom”);
$(‘.marioBox’).add_layer(“url(‘/images/mario_bush.gif’) no-repeat
10px 167px”);
$(‘.marioBox’).add_layer(“url(‘/images/mario_pipe.gif’) no-repeat
180px 183px”);
$(‘.marioBox’).add_layer(“url(‘/images/mario_cloud.gif’) no-repeat
90px 93px”);
$(‘.marioBox’).add_layer(“url(‘/images/mario_cloud.gif’) no-repeat
180px 53px”);
$(‘.marioBox’).add_layer(“url(‘/images/mario_cloud.gif’) no-repeat
20px 73px”);
$(‘.marioBox’).add_layer(“url(‘/images/goomba.gif’) no-repeat 70px
214px”);
$(‘.marioBox’).add_layer(“url(‘/images/mario.gif’) no-repeat 180px
156px”);
});
</script>
<div class=”marioBox” style=”height: 248px; width:
248px;”></div>

在上面的代码里演示了一些小怪物（来自于著名的游戏——超级玛丽）在背景层之上。

4.盒阴影和文本阴影
着个特性的目标是给予设计者和代码书写着一个很好的解决文字背后阴影效果的方案。这个特性的代码如下：

h3 { text-shadow: 2px 2px 2px #333;
}

我在Kretschmann’s
website那里找到一个很有用的文章，那描述了一些不同的使用方法以达到不同的效果。
但是，这个特性又一次不被FF和IE所支持，所以，我们必须通过我们自己运用jQuery找到另外的实现方法。

我在Kretschmann’s website那里找到一个很有用的文章，那描述了一些不同的使用方法以达到不同

How To » Drop
Shadow

这个plugin在包括文本和图像页面元素后面创建了柔和的阴影。它支持水平和垂直的位置设定，模糊数量，透明度和颜色。请看这个demo页面：

How To » Text-shadow in Internet Explorer

文本阴影增加了针对IE的阴影效果，你可以通过简单的调用textShadow()打开它。

5.透明度和不透明度
现在，css3中最被广泛执行的效果是不透明性，opacity（不透明性）影响一个元素的不透明程度，一个元素如果设置不透明性1.0将会完全可见，反之，0.0使之完全不可见。在两者之间的任何一个值会决定元素的透明程度。看这个有趣的特性在Zen
Elements中是如何表现的。

div.L1 { background:#036; opacity:0.2;
width:575px; height:20px; }
div.L2 { background:#036; opacity:0.4; width:575px; height:20px;
}
div.L3 { background:#036; opacity:0.6; width:575px; height:20px;
}
div.L4 { background:#036; opacity:0.8; width:575px; height:20px;
}
div.L5 { background:#036; opacity:1.0; width:575px; height:20px;
}

How To » Element gradient

它允许你定义一个过渡的填充值，并有一个过渡元素填充在其之上。你能够很容易的设置过渡填充的方向。