CSS圆角与圆的绘制技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/mpdemp/article/details/72742512

本文详细介绍了如何使用CSS的border-radius属性来创建不同类型的圆角效果，包括使用像素单位和比例单位的方法，并提供了绘制圆形的具体步骤。此外，还讨论了在设置不同边框样式时可能遇到的问题及兼容性注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、border-radius 制作圆角

值可以使用em，ex，pt，px，百分比等

像素单位

height: 20px;

border-radius: 10px; //这就包含了上左，上右，下左，下右。与下面四个等价

border-top-left-radius: 10px;
border-top-right-radius: 10px
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;

border-radius: 10px 10px 10px 10px;//顺序左上、右上、右下、左下

圆角尺寸 = height / 2
这里写图片描述

圆角尺寸 = height

border-top-left-radius: 20px;
border-bottom-right-radius: 20px;

这里写图片描述

比例单位

使用比例单位时，表示圆弧与两个边交叉的部分占总长度的。当同一边设置了两个时，且总比例>100%时，他们俩均分此边。

border-top-left-radius: 70%;
border-bottom-right-radius: 100%;

这里写图片描述

画一个半径100px的圆

width: 200px;
height: 200px;
border-radius:100px;

或者

border-radius:50%;

但是，当设置了边框，且样式不一样的时候，就会存在很多问题。因为他们是分开渲染的。因此应该在使用时应该统一样式
这里写图片描述

兼容性问题

-moz-border-radius
-webkit-border-radius
border-radius  //要写在-webkit-border-radius之下

在单独书写的时候，差别较大

-moz-border-radius-topleft / -webkit-border-top-left-radius 
-moz-border-radius-topright / -webkit-border-top-right-radius 
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius 
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

CSS3--圆角

兼容性问题