最近看到 IE-CSS3 讓 IE 支援 CSS3 這篇文章的介紹，提到了 IE-CSS3 可以解決這問題。下載後，自己改寫了一下程式，讓原本四四方方的按鈕有了弧度。
先到 http://fetchak.com/ie-css3/ 去下載 ie-css3.htc
接著定義了樣式內容：
.button {
background-color:#3961CA;
color:White;
cursor:pointer;
height: 22px;
border: 1px solid #c6ac6c;
position: relative;
padding: 1px 5px 1px 5px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
behavior: url(ie-css3.htc);
}
然後直接讓該按鈕 的 class 套用 button 。這樣就可以呈現出圓角按鈕了。
實作後發現，因為我的按鈕是使用伺服器控制項拉的，只要一按，頁面就會 postback 且重新載入一次頁面，這時，就會很明顯的看到我的圓弧按鈕變成正正方方，最後又在變成圓弧。對於這樣的變化，總是覺得有點怪，心裡頭似乎不大滿意這樣的效果。
於是另外又比較了一個可以產生圓弧的 JavaScript ： DD_roundies 。他只會處理針對 IE 瀏覽器的圓弧效果，但這也還好，因為其他瀏覽器幾乎都支援 css3，可以很容易的達成我所需的效果。
實作 DD_roundies，首先要到 http://www.dillerdesign.com/experiment/DD_roundies/ 下載 0.0.2a-min.js，因為我並不打算去改寫作者寫好的 code，所以直接下載壓縮後的檔案即可。
而使用方式，則是將符合您所要套用的物件放進 DD_roundies.addRule( ) 裡，而非 IE 的部份，則自行定義在 Style 裡面。
以下是完整的測試程式碼：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>未命名頁面</title>
<script type="text/javascript" src="DD_roundies_0.0.2a-min.js"></script>
<script>
DD_roundies.addRule('.button', '6px');
</script>
<style>
.button {
background-color:#3961CA; color:White; cursor:pointer;padding: 1px 5px 1px 5px;
/* Do rounding (native in Safari, Firefox and Chrome) */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnSearch" CssClass="button" Text="存檔" runat="server" />
</div>
</form>
</body>
</html>
經過這兩個範例，自己比較欣賞 DD_roundies ，因為即便是網頁發生 postback 重新載入，圓弧的按鈕都不會有任何變化，這正也是我想要的結果。
參考頁面：
01. CSS3 support for Internet Explorer 6, 7, and 8
02. DD_roundies
03. CSS 3 的新玩意
04. IE-CSS3 讓 IE 支援 CSS3
沒有留言:
張貼留言