站長資訊網(wǎng)css樣式把按鈕變圓的方法：首先創(chuàng)建一個HTML示例文件；然后定義一個button按鈕；最后通過css中的“border-radius”屬性將按鈕四角設(shè)置為圓角即可。
本教程操作環(huán)境：windows7系統(tǒng)、HTML5&&CSS3版、Dell G3電腦。
將button變成圓形（有弧度）
border-radius可以將button變成圓形，也可以給p加有弧度邊框
border-radius 規(guī)則：
一個值： 四個圓角值相同
兩個值: 第一個值為左上角與右下角，第二個值為右上角與左下角
三個值: 第一個值為左上角, 第二個值為右上角和左下角，第三個值為右下角
四個值: 第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角。
樣式：
<!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，讓瀏覽器首選執(zhí)行這個語句
border-radius: 6px !important;
CSS中的!important一般都是用于對低版本的除了iE 6 ，用來做hack的，后面綴上了!important的css語句，讓瀏覽器首選執(zhí)行這個語句，因為css有繼承的樣式，加上!importanrt可以覆蓋父級的樣式。
推薦：《HTML視頻教程》
