How build circle style of button

2010-07-17

5577
0
ASP.NET

如何建立一個具有弧度的按鈕要呈現於網頁程式上，對大家而言也許很容易就搜尋到相關的資訊，

對於我這個撰寫網頁程式通常只負責設計程式模組與串接流程的人，對於畫面的處理，實在不是這

麼的在行，因此，針對目前自己使用到的作法與網路搜尋大家推薦的做法，做了一個簡單的整理，

分享給大家。以下是常見大家常見的方法有：

(1) 透過換掉Button的background

這樣的作業是最常見的，因為方便的使用，所有的瀏覽器都可以支援，但這樣的作法存在一個缺點：

無法隨字數長度增長按鈕圖示。這樣的缺點尤其是在做多國語系的時候最常會遇到，因為字型、字數

都是會影響的因素。

   1: <input type="button" value="Button1" style="background: url(images/button1.png);" />

(2) 利用四個<b>的標籤配合產生

透過四個<b>分別畫面弧度的上面的左右二個角，再用四個<b>再畫出下面的左右二個角。這樣的做法，

常見於<div>的使用，它可以協助<div>做出漂亮的四個角，這樣的做法針對<div>、<table>一些集合型的

標籤是非常適合的。但對於Button它只是一個<input>如果在加上八個<b>老實說有點奇怪，因為你的按鈕，

會變成只有四個角，中間缺乏一塊，而且會造成畫面的資料Size變大。

   1: <style type="text/css">   2:     b.rtop, b.rbottom{display:block;background: #FFF}    3:     b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}    4:     b.r1{margin: 0 5px}    5:     b.r2{margin: 0 3px}    6:     b.r3{margin: 0 2px}    7:     b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}    8: </style>   9:    10: <div>  11:    <b class="rtop">  12:       <b class="r1"></b><b class="r2"></b>  13:       <b class="r3"></b><b class="r4"></b>  14:    </b>  15:    <div>你要輸入的內容</div>  16:    <b class="rbottom">  17:       <b class="r4"></b><b class="r3"></b>  18:       <b class="r2"></b><b class="r1"></b>  19:    </b>     20: </div>

(3) 將按鈕分割成三個區段，左、中、右，分別透過<span>配合Css來完成。

這個方法是目前我使用的方法，它也有相關的介紹網站來說明這樣做法的好處，如下之網址：

http://josephjiang.com/entry.php?id=334，裡面介紹了，如何透過<span>的方式，將<input>的按鈕組合有弧度

的外殼，它的作法大致如下的Code：

   1: <span class="miii-button">   2:     <span class="miii-button-content miii-button-miii-button-core">   3:         <span class="first-child">   4:             <span class="text">   5:                 <span class="icon"></span>Lorem Ipsum is simply    6:             </span>   7:             <input type="submit" value="Lorem Ipsum is simply " disabled>   8:         </span>   9:         <span class="t"><span></span></span>  10:         <span class="m"><span></span></span>  11:         <span class="b"><span></span></span>  12:     </span>  13: </span>

你可以看到有三個<span>，分別用了t、m、b三個Css Class來代表上圓角、中圓角與下圓角，讓按鈕成形，

並且它還可以支援按鈕前在加個小icon，這個作法，我跟著試過了一些瀏覽器都可以正常的運作。

另外，我想補充一個作法，如果你像我一樣實在是不太會用配色與操作Css把畫面變成非常漂亮的話，

那你也可以跟我一樣這樣做：

1. 將一張原有按鈕的圖示，分成三個區段，例如：button_left.png、button_mid.png與button_right.png。

2. 透過<span>+圖片+Css來組合圓角按鈕如下：

   1: <style type="text/css">   2: .Button_Left   3: {   4:     display: inline-block;   5:     height: 30px;   6:     background: url(Image/button_left.gif) no-repeat left top;    7: }   8:     9: .Button_Right  10: {  11:     display: inline-block;  12:     height: 30px;  13:     background: url(Image/button_right.gif) no-repeat right top;  14: }  15:    16: .Button_Mid  17: {  18:     border: none;  19:     margin: 0 3px;  20:     background: url(Img/button_mid.gif) repeat-x left;  21:     height: 30px;  22: }  23: </style>  24:    25: <div>  26:     <span  class="Button_Left">                               27:         <span class="Button_Right">  28:             <input type="button" id="Button1" value="Button1"   29:                class="Button_Mid" />  30:         </span>  31:     </span>  32: </div>