Dreamweaver如何使用CSS制作圓角按鈕

這篇文章主要介紹Dreamweaver如何使用CSS制作圓角按鈕，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

效果圖：

1、新建一個html文件，在body中先輸入一個a標簽，并插入一個空鏈接?！?lt;a class="btn-style" href="#">開始游戲</a>】，然后在title中插入引入內嵌樣式的代碼【<style type="text/css"></style>】。

2、然后我們給a標簽添加一個css樣式，命名為【btn-style】，并定義按鈕的寬、高、字體顏色、背景色、去掉下劃線。注意要加上disply:block，否則定義按鈕的寬高都不會生效?！?strong>width: 150px;height: 50px;color:#F8FF00;background: #FF0000;text-decoration:none;display: block;】然后在a標簽中引入btn-style樣式【class="btn-style"】。保存網頁后按F12在瀏覽器中查看，這時我們發現字體小，而且沒有在按鈕的中間位置。

3、我們繼續添加樣式，給按鈕定義字體水平居中、垂直居中、字體、字體大小。

line-height: 50px;text-align: center;font-size: 20px;font-family: "微軟雅黑";

保存網頁查看效果，按鈕的基本樣子就有了。

4、然后我們把按鈕的四個角設置成圓角，看起來就更像按鈕了?！綽order-radius: 100px;】。保存后查看效果，還可以把？

5、我們還可以把鼠標經過按鈕時變換下顏色，這樣按鈕就比較明顯了，我們可以單獨給a標簽定義一個鼠標經過后的顏色，把鼠標經過后字體顏色由之前的黃色變為白色【a:hover{color:#fff;}】

6、除了定義鼠標經過時字體顏色，按鈕背景色也可以更改一下?！?strong>background: #B00000;】。

7、為了方便經驗的朋友們觀察效果，我特意復制了一個一模一樣的按鈕，并把兩個按鈕之間加了外間距，并保存網頁，在網頁中可看到鼠標經過下面按鈕時鼠標變色了，是不是很好呢？

8、我們也可以在DW中直接點擊頂部中間的【拆分】查看實時效果哦。是不是很簡單呢？

以上是“Dreamweaver如何使用CSS制作圓角按鈕”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！