CSS中四分之一圓的寫法
阿新 • • 發佈：2019-01-29
關於百度前端學院中task4四分之一圓的畫法（基於CSS中畫圓角的方法）
方法一：
設定寬高為100px，border-radius設定為50%（當然這裡也可以設定為50px）
width:100px;height:100px;border-radius:50%;
因為使用的半徑為邊長的一半，故四個圓角的圓心重合在正方形對角線的交點處。因此做出來的是一個整圓，如要要顯示為四分之圓，可以用相對或者絕對定位偏移一定的數值，將圓心定位到矩形頂角。而關鍵的地方就是要將超出矩形的四分之三圓隱藏，方法就是overflow：hidden；。
方法二：
border-radius設定四個值，此時top-left取第一個值，top-right取第二個值，bottom-right取第三個值.bottom-left取第四個值：
（本段摘抄自http://www.studyofnet.com/news/276.html）
.demo {
border-radius:10px 20px 30px 40px;
}
等價於：
.demo {
border-top-left-radius: 10px;border-top-right-radius: 20px;border-bottom-right-radius: 30px;border-bottom-left-radius: 40px;}
效果：
如上所述，要想設定為四分之一圓，則只用設定一個圓角的值即可。
具體設定方法：
左上的四分之一圓設定為：border-bottom-right-radius：50px；
右下的四分之一圓設定為：border-top-left-radius：50px；
效果如下圖：
