border-radius可以将button变成圆形,也可以给div加有弧度边框
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: 346px 346px 346px 346px; } .btnStyle2{ border-radius: 6px; } .btnStyle3{ border-radius: 26px 6px; } .btnStyle4{