css3製作圓角按鈕

2021-06-17 00:35:59 字數 1506 閱讀 3507

使用 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...