整圆:
要求初始div或者其他什么的模块长宽一致
width: 100px; height:100px; border: 10px solid red;
然后四个角的border-radius都等于正方形宽度一半(如果你的边框有距离那么要算上边框宽度如上述例子中)
border-radius:60px;
最终效果
半圆:
要求初始div或者其他什么的模块长宽或宽长要1:2
width: 100px; height:50px; border: 10px solid red;
然后选择半圆所朝方向的那两个角的border-radius都等于矩形宽度一半(如果你的边框有距离那么要算上边框宽度如上述例子中),另外两角的border-radius设为0
border-radius:60px 60px 0 0;
最终效果
四分之一圆:
要求初始div或者其他什么的模块长宽或宽长要1:2
width: 100px; height:100px; border: 10px solid red; border-radius:120px 0px 0 0;
然后四个角的border-radius都等于正方形宽度(如果你的边框有距离那么要加上两个边框宽度如上述例子中),另外三个角的border-radius设为0
border-radius:120px 0px 0 0;
最终效果