首页 > 编程笔记
CSS border-radius属性的用法
想制作一个圆角的 div 块,如果一个 div 块的 4 个角具有相同的圆角半径,则给 border-radius 属性设置一个值即可。
例如:
![](/uploads/allimg/240510/2-240510142303115.gif)
图 1 统一设置圆角
如果各个角的圆角半径不同,则可以先设置一个统一的值,然后对特殊的角进行单独设置,或者直接对 4 个角分别设置圆角半径。
例如:
![](/uploads/allimg/240510/2-240510142325R2.gif)
图 2 单独设置圆角
上面 div 块的 4 个角被统一设置为 10px,然后单独把右上角设为了 40px。单独设置某个角的圆角半径的属性是 border-*-*-radius,例如 border-top-right-radius:40px;,上、下方向在前,左、右方向在后。
如果是单独设置各个角的圆角半径,并且仍然使用 border-radius 属性,则规则如下:
另外,对于一个圆角,还可以使其产生椭圆的效果,甚至可以用这种方式制作椭圆形,而且制作起来也非常方便,例如:
![](/uploads/allimg/240510/2-24051014234L20.gif)
图 3 通过圆角实现椭圆形
border-radius:150px/50px 表示水平方向的半径为 150px,这里正好是整个 div 块宽度的一半。竖直方向的半径为 50px,正好也是 div 块高度的一半,这样就可以得到一个长宽比为 3:1 的椭圆形。
由此可见,使用 CSS3 来制作(圆形或者)椭圆形是非常方便的。
border-radius 属性也可以使用百分比进行设置,其表示圆角半径与边长的比例。例如在上例中设置 border-radius:50% 可以得到和图 3 完全相同的效果。
例如:
<!DOCTYPE html> <html> <head> <style> .round { border-radius: 20px; background-color:#ccc; padding: 20px; width: 300px; height: 100px; } </style> </head> <body> <div class="round"></div> </body> </html>效果如下图所示:
![](/uploads/allimg/240510/2-240510142303115.gif)
图 1 统一设置圆角
如果各个角的圆角半径不同,则可以先设置一个统一的值,然后对特殊的角进行单独设置,或者直接对 4 个角分别设置圆角半径。
例如:
<!DOCTYPE html> <html> <head> <style> .round { background: #ccc; width: 300px; height: 100px; margin:20px; } .round-up { border-radius: 10px; border-top-right-radius:40px; } .round-down { border-radius: 10px 20px 40px 60px; } </style> </head> <body> <div class="round round-up"></div> <div class="round round-down"></div> </body> </html>效果如下图所示:
![](/uploads/allimg/240510/2-240510142325R2.gif)
图 2 单独设置圆角
上面 div 块的 4 个角被统一设置为 10px,然后单独把右上角设为了 40px。单独设置某个角的圆角半径的属性是 border-*-*-radius,例如 border-top-right-radius:40px;,上、下方向在前,左、右方向在后。
如果是单独设置各个角的圆角半径,并且仍然使用 border-radius 属性,则规则如下:
- 4 个值:第 1 个值为左上角,第 2 个值为右上角,第 3 个值为右下角,第 4 个值为左下角;
- 3 个值:第 1 个值为左上角,第 2 个值为右上角和左下角,第 3 个值为右下角。
- 2 个值:第 1 个值为左上角与右下角,第 2 个值为右上角与左下角。
- 1 个值:4 个圆角值相同。
另外,对于一个圆角,还可以使其产生椭圆的效果,甚至可以用这种方式制作椭圆形,而且制作起来也非常方便,例如:
<!DOCTYPE html> <html> <head> <style> .round { border-radius: 150px/50px; background: #ccc; width: 300px; height: 100px; margin:20px; } </style> </head> <body> <div class="round"></div> </body> </html>效果如下图所示:
![](/uploads/allimg/240510/2-24051014234L20.gif)
图 3 通过圆角实现椭圆形
border-radius:150px/50px 表示水平方向的半径为 150px,这里正好是整个 div 块宽度的一半。竖直方向的半径为 50px,正好也是 div 块高度的一半,这样就可以得到一个长宽比为 3:1 的椭圆形。
由此可见,使用 CSS3 来制作(圆形或者)椭圆形是非常方便的。
border-radius 属性也可以使用百分比进行设置,其表示圆角半径与边长的比例。例如在上例中设置 border-radius:50% 可以得到和图 3 完全相同的效果。