单独对四个角进行设置：

boder-top-left-radius：30px； //左上角

boder-top-right-radius：30px； //右上角

boder-bottom-left-radius：30px； //右下角

boder-bottom-right-radius：30px； //左下角

如果这四个弧度的圆角相同，可以写成：

border-radius：30px

注：百分比大于50%后，形状就不会再变化了，圆角的半径不能超过宽/高的一半

浏览器显示如下：

半圆

• 下半圆直接将100和0互换位置
• 其他方向的圆四个位置互换即可

浏览器显示如下：

扇形

浏览器显示如下：

如果有想要交流的内容欢迎在评论区进行留言，如果这篇文档受到了您的喜欢那就留下你点赞、收藏脚印支持一下博主~