關于百度前端學院中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；

效果如下圖：

總結

以上是生活随笔為你收集整理的CSS中四分之一圆的写法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。