簡單談談自己對htm與css中畫圓的理解。，談談htmcss

簡單談談自己對htm與css中畫圓的理解。，談談htmcss

      近幾天，在利用css編輯中，發現不少邊框映像要求是矩形圓角或者直接畫一個圓的例子，下面和大家一起分享下對畫圓的看法。

     在這次的分享中，我側重給大家看一些例子來更好的理解，

     我們都明白，畫圓時要用到“border-radius：”，而且在每次畫圓時，我們都應該先設定一個width和height。

    那麼我們可以這樣理解，

     我們的圓是在一個矩形（正方形）中進行裁剪的，而border-radius就是我們要裁剪的尺寸。

     給大家一些圖片，更好的去理解。

    首先，我們設定一個width為100px，高度為100px的正方形，設定為紅色背景，如下

     接下來，我們在後面添加

     border-radius：50px 0 0 0；效果如下：

     border-radius：50px 50px 0 0；效果如下：

     border-radius：50px 50px 50px 0；效果如下：

     border-radius：50px 50px 50px 50px；效果如下：

 

     通過上述一步一步添加代碼，圖片一步一步的改變，我理解出如下：

     border-radius：0 0 0 0；

     四個值中，第一個值為矩形左上方的圓形半徑（1/4的圓）；

                   第二個值為矩形右上方的圓形半徑（1/4的圓）；

                   第三個值為矩形右下角的圓形半徑（1/4的圓）；

                   第四個值為矩形左下角的圓形半徑（1/4的圓）；

     並且，他們是在矩形的邊界上進行半徑取值，再確定圓心的(這就可以完成矩形圓角，通過改變半徑來實現。)

 

     以上就是我對border-radius的理解，有哪些不對的地方，歡迎大家評點。