#cicle {
??????????? width: 100px;
??????????? height: 100px;
??????????? background-color: #000;
??????????? -moz-border-radius: 50px;
??????????? -webkit-border-radius: 50px;
??????????? border-radius: 50px;
??????? } 實驗表明?border-radius 只要是大于 height 或width 的1/2就能成圓形 另外： #circle{
??????????? height: 100px;
??????????? width: 100px;
??????????? border-radius: 100px;
??????????? border: 50px solid #f21;
??????? } 這樣可以畫出一個中間是空的圓： 說明（一）： border 的寬度不能超過?height 或width 的1/2，否則圓會越來越變形。 因此可以說明 :?border-radius?是從 border 開始，隨著?border-radius?增大，圓心逐漸向 塊級元素的中點靠近，當?border-radius 等于 塊級元素 height 或 width 的一半時，圓心和塊級元素的中點重疊，此后再增大?border-radius 也不會有改變了。 當 border 寬度大的時候，就涉及到了?border-radius 圓弧的邊界是 border 的外層還是內層的問題，如下面： #circle{
??????????? height: 100px;
??????????? width: 100px;
??????????? border-radius: 50px;
??????????? border: 50px solid #f21;
??????????? background-color: #fff;
??????? } 說明（二）： 從上面的例子可以看出，border-radius 圓弧的邊界是 border 的外層，因此 border 的厚度越大，最后的圓會越來越不圓，當 border 的厚度大于等于?border-radius 時，border-radius 的圓心 在 比border 中，這時候就不能改變塊級元素的形狀了。 另外 border 厚度越來越大的話會把塊級元素“擠”到其父級元素外面去，因為父級元素下面的子元素的位置與margin有關，而 border 外才是margin

轉載于:https://www.cnblogs.com/bestend/p/4459637.html

總結

以上是生活随笔為你收集整理的CSS画基本图形——圆的全部內容，希望文章能夠幫你解決所遇到的問題。

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