border-radius属性 可以给任何元素设置圆角 而border-radius设值有许多种方式，下面实例给大家演示设值 默认 border-radius: none;
<!DOCTYPE html> <html> <head> <title>边框属性圆角矩形边框</title> <style type="text/css"> .b1{ display: inline-block; width: 150px; height: 150px; background: RGB(201,176,158); padding: 20px; /*一个值 四个圆角值相同*/ border-radius: 12px; } .b2{ display: inline-block; width: 150px; height: 150px; border: 5px solid RGB(201,176,158); /*两个值 第一个值为左上角与右下角，第二个值为右上角与左下角*/ border-radius: 12px 50px; } .b22{ display: inline-block; width: 150px; height: 150px; background: RGB(201,176,158); padding: 20px; /*两个值 水平半径/垂直半径*/ border-radius: 50px/50px; } .b3{ display: inline-block; width: 150px; height: 150px; background: RGB(201,176,158); padding: 20px; /*三个值 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角*/ border-radius: 12px 50px 30px; } .b4{ display: inline-block; width: 150px; height: 150px; background: RGB(201,176,158); padding: 20px; /*四个值 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角 顺时针*/ border-radius: 12px 23px 34px 45px; } .b5{ display: inline-block; width: 150px; height: 150px; background: RGB(201,176,158); padding: 20px; /*单独设置*/ border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; } </style> </head> <body> <div class="b1">b1</div> <div class="b22">b22</div> <div class="b2">b2</div> <div class="b3">b3</div> <div class="b4">b4</div> <div class="b5">b5</div> </body> </html>结果如下： 有很多看官有可能对水平半径和垂直半径不理解，上张图你就懂了 [tips: 图片来源于网络，侵删]
