主流浏览器使用jQuery CSS3技术力量
深圳网站建设许多令人兴奋的新功能和特性被认为为CSS3：文字阴影，盒大小，透明度，多重背景，边界半径，边界图像，等等。

CSS3带来更大的灵活性，使它重现以前复杂的影响更容易。不是所有的浏览器都支持CSS3的电流，但它却有可能创造同等的效果和服务与jQuery的力量。

本文介绍5个CSS3技术大大给你一个惊人的用户界面和如何达到几乎相同的效果使用的浏览器不兼容CSS3新功能jQuery。

1。边界创建圆角半径：
W3C已经边界CSS3提供非常有趣的选择，其中一个是边界半径。这款CSS3样式规则将允许圆角。两mozila / Firefox和Safari 3已经实现了这个功能，它允许您在创建圆角框项目。

使用规定的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的解决方案和插件，可以让你在不使用图片的情况下创建圆角。

jQuery插件在您的DOM对象上创建圆角，您可以使用以下选项更改：

    radio – (int) radius size of corners
    inColor – (color) inside color of element
    outColor – (color) outside color of corners
    borderSize – (int) border width
    borderColor – (color) color of borders

如何»jQuery的角落
在所有浏览器中使用jQuery 10 CSS3特点
这个jQuery插件很容易创建漂亮的圆角。没有必要的图像或突兀的标记。

2。边缘图像
另一个令人兴奋的新的边界特征的CSS3是财产边界图像。边界图像，允许图像用作元素的边界。图像的每一个侧面对应的HTML对象的一个侧面。

在所有浏览器中使用jQuery 10 CSS3特点

目前，“边界”形象是在即将到来的firefox3.1和Safari和Chrome最近发布实施。下面你会发现一个巧妙的jQuery解决方案，它允许你在Firefox 2，火狐3，火狐3.1，Safari 3，Chrome 1，Opera 9，Opera 10中使用这个特性。

和IE7。

jquery.borderimage是一个跨浏览器，CSS3的边界图像属性部分实现。这个插件可以通过创建一个一个一个的图像九个片段来创建与边界图像相同的效果，然后将它们平铺在元素的背景中。

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标签的多个/分层背景，您可以将CSS标记与CSS嵌套在一起，以提供您想要的背景。这是一个很大的代码，和似乎不太有效。解决方案是使用带有背景层插件的jQuery。

如何»CSS多重背景/背景分层与jQuery

背景层插件只需添加几行JavaScript，就可以减少编写所需的XHTML，使代码不那么麻烦。这个概念类似于PS图象处理软件的层使用，在顶部的另一个背景图像。

上面的代码演示了铺设背景比使用经典的视频游戏几精灵、超级马里奥兄弟3。

4。框阴影和文本阴影
这个属性的主要目标是让设计者和CSS编码器在文本后面显示阴影。属性语法看起来应该像这样：
h3 { text-shadow: 2px 2px 2px #333; }

一个非常有用的文章，我在Kretschmann的网站上找到，说明该属性不同的用法，包括使用它在一个很好的方式不同的例子。
同样，Firefox和IE也不支持这个属性，所以我们必须使用jQuery来找到另一种方法来实现它。

此插件在页面元素后面创建软阴影，包括文本和透明图像。它接受水平和垂直偏移量、模糊度、不透明性和颜色的选项。请看演示页为例。
Internet Explorer中的文本阴影将文本阴影效果添加到Internet Explorer中。你可以很容易地把它称textshadow()；。

5、透明度和不透明性
CSS3目前最广泛应用的特点是透明度。“不透明度”设置一个元素的值如何不透明。不透明值1的元素将是完全不透明的（可见的），而不透明值为0的元素将是完全相反的，不可见的。任何价值之间将如何确定不透明（或透明）元素。看看这个有趣的帖子由禅宗元素解释如何使用它。

上面的不透明度示例是在另一层中设置的，它包含一个完全随机的、从未见过的背景，每个层使用以下CSS：

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; }

它允许你定义一个渐变填充，并填充一个渐变元素。您可以设置渐变的方向（右向左或向下）和渐变的不透明度。