在製作後臺登入頁的時候，需要從網頁上面把那個圓角矩形框選取下來，然後通過Photoshop進行切割，在進行設定，最後得到需要的登入框的圓角矩形框。如下圖。

    但是登入最新的智囊團的那個登入頁面的時候，上面的那個圓角矩形框已經沒有了，最新的登陸頁面跟QQ郵箱登入頁面一樣，沒有了圓角矩形框。所以我就想到了用css自己堆出來一個圓角矩形框，通過查詢資料，以及自己的一些使用方法的改進，最終得到了自己所需要的圓角矩形框——純CSS設計圓角矩形框。

下面講一下思路：圓角矩形框的難點就在於如何把那個圓角表示出來，其實我們把那個圓角的地方放大一下就會發現，所謂的圓角並不是嚴格的圓角，只是由於線條看起來比較和諧，那個圓角其實也是直角的框的那個直角。

這就是一個放大了的圓角矩形框，可以看到圓角的具體構成。

明白了原理，下面是程式碼的實現部分，非常簡單：

<span style="font-family:KaiTi_GB2312;font-size:24px;"><%--製作圓角矩形的程式碼-HTML程式碼部分--%>
            <div class="divbox">
                <div class="div1"></div>
                <div class="div2"></div>
                <div class="divmiddle">
                   主要內容
                </div>
                <div class="div2"></div>
                <div class="div1"></div>
            </div>
</span>
 

<span style="font-family:KaiTi_GB2312;font-size:24px;">/*圓角框的製作-CSS程式碼部分*/

.divbox {
    width: 580px;     
}

/*.div1 .div2 .divmiddle{
    float :right  ;
}*/
.div1 {
    background: #999999;
    border-left: #999999 solid 3px;
    border-right: solid 3px #999;
    margin: 0px 6px;
    height: 3px;
    overflow: hidden;
}

.div2 {
    background: #FFF;
    border-left: #999999 solid 3px;
    border-right: solid 3px #999;
    margin: 0px 2px;
    height: 3px;
    overflow: hidden;
}

.divmiddle {
    height: 285px;
    border-left: #999999 solid 3px;
    border-right: solid 3px #999;
}
.divmiddle p,h3,btnLogin,btnCancel{
    float :right ;
}
</span>
 

通過程式碼可以看出，圓角矩形框通過3類的div標籤進行組合設計，最終形成一個圓角矩形框。這裡關鍵的是overflow屬性，是把被覆蓋的內容給隱藏了，所以可以露出自己需要的部分，這裡的技巧需要讀者自己思考。

接下來就是實戰了，在middle中新增如下程式碼：

圓角矩形框的邊出現了空白，這是由於在使用了<h3>，在這個正常流中<h3>這個部分的寬度比較大，把左右兩邊的正常流的邊給撐開了，所以出現了斷線的部分。那麼只要把<h3>的部分從正常流中拿走就可以改正這個缺點，對，就是float屬性，下面的效果是經過我半個下午2個小時的不斷除錯，最終形成的結果：

    通過float屬性，浮動控制元件，然後再重新進行定位，這樣的效果看似簡單，後面包含的過程卻是對自己知識的一個總結提升，這個過程對我來說非常享受，全身心的投入到最後的效果出來，感覺那真是爽。當然了這個設計效果還是有提升空間的，比如把整個的框移到垂直方向上的中間線，等等，那就發揮你的想象力吧。