主流瀏覽器使用jQuery CSS3技術(shù)力量
深圳網(wǎng)站建設(shè)許多令人興奮的新功能和特性被認(rèn)為為CSS3：文字陰影，盒大小，透明度，多重背景，邊界半徑，邊界圖像，等等。

CSS3帶來更大的靈活性，使它重現(xiàn)以前復(fù)雜的影響更容易。不是所有的瀏覽器都支持CSS3的電流，但它卻有可能創(chuàng)造同等的效果和服務(wù)與jQuery的力量。

本文介紹5個(gè)CSS3技術(shù)大大給你一個(gè)驚人的用戶界面和如何達(dá)到幾乎相同的效果使用的瀏覽器不兼容CSS3新功能jQuery。

1。邊界創(chuàng)建圓角半徑：
W3C已經(jīng)邊界CSS3提供非常有趣的選擇，其中一個(gè)是邊界半徑。這款CSS3樣式規(guī)則將允許圓角。兩mozila / Firefox和Safari 3已經(jīng)實(shí)現(xiàn)了這個(gè)功能，它允許您在創(chuàng)建圓角框項(xiàng)目。

使用規(guī)定的CSS代碼復(fù)制上面的例子。

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

下面你會(huì)發(fā)現(xiàn)jQuery的解決方案和插件，可以讓你在不使用圖片的情況下創(chuàng)建圓角。

jQuery插件在您的DOM對(duì)象上創(chuàng)建圓角，您可以使用以下選項(xiàng)更改：

    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特點(diǎn)
這個(gè)jQuery插件很容易創(chuàng)建漂亮的圓角。沒有必要的圖像或突兀的標(biāo)記。

2。邊緣圖像
另一個(gè)令人興奮的新的邊界特征的CSS3是財(cái)產(chǎn)邊界圖像。邊界圖像，允許圖像用作元素的邊界。圖像的每一個(gè)側(cè)面對(duì)應(yīng)的HTML對(duì)象的一個(gè)側(cè)面。

在所有瀏覽器中使用jQuery 10 CSS3特點(diǎn)

目前，“邊界”形象是在即將到來的firefox3.1和Safari和Chrome最近發(fā)布實(shí)施。下面你會(huì)發(fā)現(xiàn)一個(gè)巧妙的jQuery解決方案，它允許你在Firefox 2，火狐3，火狐3.1，Safari 3，Chrome 1，Opera 9，Opera 10中使用這個(gè)特性。

和IE7。

jquery.borderimage是一個(gè)跨瀏覽器，CSS3的邊界圖像屬性部分實(shí)現(xiàn)。這個(gè)插件可以通過創(chuàng)建一個(gè)一個(gè)一個(gè)的圖像九個(gè)片段來創(chuàng)建與邊界圖像相同的效果，然后將它們平鋪在元素的背景中。

3.多背景
CSS3允許一個(gè)元素的背景圖片，這是一個(gè)真正的節(jié)省時(shí)間。為了做到這一點(diǎn)，你可以用逗號(hào)分隔背景，像這樣
#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;
}

由于大多數(shù)瀏覽器都不支持這個(gè)特性，并且需要一個(gè)div標(biāo)簽的多個(gè)/分層背景，您可以將CSS標(biāo)記與CSS嵌套在一起，以提供您想要的背景。這是一個(gè)很大的代碼，和似乎不太有效。解決方案是使用帶有背景層插件的jQuery。

如何»CSS多重背景/背景分層與jQuery

背景層插件只需添加幾行JavaScript，就可以減少編寫所需的XHTML，使代碼不那么麻煩。這個(gè)概念類似于PS圖象處理軟件的層使用，在頂部的另一個(gè)背景圖像。

上面的代碼演示了鋪設(shè)背景比使用經(jīng)典的視頻游戲幾精靈、超級(jí)馬里奧兄弟3。

4。框陰影和文本陰影
這個(gè)屬性的主要目標(biāo)是讓設(shè)計(jì)者和CSS編碼器在文本后面顯示陰影。屬性語(yǔ)法看起來應(yīng)該像這樣：
h3 { text-shadow: 2px 2px 2px #333; }

一個(gè)非常有用的文章，我在Kretschmann的網(wǎng)站上找到，說明該屬性不同的用法，包括使用它在一個(gè)很好的方式不同的例子。
同樣，F(xiàn)irefox和IE也不支持這個(gè)屬性，所以我們必須使用jQuery來找到另一種方法來實(shí)現(xiàn)它。

此插件在頁(yè)面元素后面創(chuàng)建軟陰影，包括文本和透明圖像。它接受水平和垂直偏移量、模糊度、不透明性和顏色的選項(xiàng)。請(qǐng)看演示頁(yè)為例。
Internet Explorer中的文本陰影將文本陰影效果添加到Internet Explorer中。你可以很容易地把它稱textshadow()；。

5、透明度和不透明性
CSS3目前最廣泛應(yīng)用的特點(diǎn)是透明度。“不透明度”設(shè)置一個(gè)元素的值如何不透明。不透明值1的元素將是完全不透明的（可見的），而不透明值為0的元素將是完全相反的，不可見的。任何價(jià)值之間將如何確定不透明（或透明）元素。看看這個(gè)有趣的帖子由禪宗元素解釋如何使用它。

上面的不透明度示例是在另一層中設(shè)置的，它包含一個(gè)完全隨機(jī)的、從未見過的背景，每個(gè)層使用以下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; }

它允許你定義一個(gè)漸變填充，并填充一個(gè)漸變?cè)亍Ｄ梢栽O(shè)置漸變的方向（右向左或向下）和漸變的不透明度。