css樣式把按鈕變圓的方法：先建立一個HTML範例檔；然後定義一個button按鈕；最後透過css中的「border-radius」屬性將按鈕四角設定為圓角即可。
本教學操作環境：windows7系統、HTML5&&CSS3版、Dell G3電腦。
將button變成圓形（有弧度）
border-radius可以將button變成圓形，也可以給p加有弧度邊框
border-radius 規則：
一個值： 四個圓角值相同
兩個值: 第一個值為左上角與右下角，第二個值為右上角與左下角
三個值: 第一個值為左上角, 第二個值為右上角與左下角，第三個值為右下角
四個值: 第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角。
樣式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.btn{
width: 100px;
height: 30px;
background: green;
border: none;
color: white;
margin: 6px 10px;
}
.btnStyle1{
border-radius: 6px;
}
.btnStyle2{
border-radius: 26px 6px;
}
.btnStyle3{
border-radius: 6px 26px 60px;
}
.btnStyle4{
border-radius: 6px 126px 236px 346px;
}
.bolder{
border: solid 1px green;
width: 500px;
height: 40px;
border-radius: 10px;
}
</style>
</head>
<body>
<p class="bolder">
<button class="btn btnStyle1">按钮1</button>
<button class="btn btnStyle2">按钮2</button>
<button class="btn btnStyle3">按钮3</button>
<button class="btn btnStyle4">按钮4</button>
</p>
</body>
</html>有時border-radius會失效
解決方法：萬能的!important;
在border-radius屬性裡面加上!important，讓瀏覽器首選執行這個語句
border-radius: 6px !important;
CSS中的! important一般都是用來對低版本的除了iE 6 ，用來做hack的，後綴上了!important的css語句，讓瀏覽器首選執行這個語句，因為css有繼承的樣式，加上!importanrt可以覆蓋父級的樣式。
推薦：《HTML影片教學》
以上是css樣式怎麼把按鈕變圓的詳細內容。更多資訊請關注PHP中文網其他相關文章！