使用 css3 製作圓角按鈕,無需
首先來看看效果圖:
html **就這麼簡單:
button
button
button
如果沒有 css ,那麼上面的 html 執行起來是這樣的:
開始 css3 的編寫:
.button
一些不同顏色的按鈕樣式:
.green
/* blue color */
.blue
/* gray color */
.gray
到這一步後按鈕看起來是這樣的:
接下來開始用 css 處理圓角:
.button
現在的按鈕圓潤多了,看看:
還不夠啊,沒有立體效果,再完善完善:
/* green color */
.green
/* blue color */
.blue
/* gray color */
.gray
現在爽了,漂亮了,你喜歡這樣的按鈕嗎?
為了讓按鈕更大一點,我們增加了個 big 樣式:
sign in one minute
sign in one minute
sign in one minute
/* big button style */
.big
.big span
大按鈕的效果:
我們還需要處理下當滑鼠移到按鈕上方時顯示不同的效果:
.button:hover
.button:active
效果如下:
CSS3之圓角製作
如今css3中的border radius出現後,讓我們沒有那麼多的煩惱了,首先製作圓角的時間是省了,而且其還有多個優點 其一減少 的維護的工作量,少了對的更新製作,的替換等等 其 二 提高 的效能,少了對進行http的請求,網頁的載入速度將變快 其三增加視覺美觀性。既然border radius有...
CSS3 實現圓角方法
這裡只是稍微的翻譯下,希望大家能夠從中領悟。圓角效果,首先我們應該來建立乙個div和簡單的css吧。在css中,我們應該給他定義乙個寬度和高度,當然還有背景。box 2.這種情況比較特殊,是對左上角和右下角設定同一種圓角,而右上角和左下角是同一種圓角。box 3.這種情況也比較特殊,是左上角為20p...
CSS3學習筆記 圓角
圓角 優點 一.減少 的維護量 三.增加視覺美觀性 border radius 含義 邊框半徑 指定乙個值,就是能同時設定四個角的半徑 預設值為0,但不可以為負 border radius 25px 講每個圓角 水平半徑 和 垂直半徑 設定為25px 2 指定每個角 圓角引數缺失情況 div1 di...