主流瀏覽器使用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; }

它允許你定義一個漸變填充，并填充一個漸變元素。您可以設置漸變的方向（右向左或向下）和漸變的不透明度。