CSS3 (border-radius)深度探析

border-radius

---

為元素添加圓角邊框

<div class = "demo"></div>

.demo{
    width:100px;
    height:100px;
    background-color:red; border-radius:50%;
   }

                   

 

 50%？？？設置的是哪？？？

還記得在css中margin屬性，如下：

margin：10px；

展開來：margin-top:10px;

              margin-right:10px;

              margin-bottom:10px;

              margin-left:10px;

相似的還有padding\border等

Border-radius也是其中一類

 50%-->       border-top-left-radius:50%;    /*上左角*/
              border-top-right-radius:50%;   /*上右角*/
              border-bottom-right:50%;       /*下右角*/
              border-bottom-left:50%;        /*下左角*/
/*要注意定義的順序：上左、上右、下右、下左，我們習慣於說左上右上右下坐下，但是border-radius屬性表示的時候先說明上下，在說明左右*/

 四類情況

1.order-radius:50% 0 0 0 ;

                      

還沒有明白的話，下圖：

左50px;豎直方向50px為圓心50px為半徑畫圓，與左上角的重疊部分

                     

2.border-radius:0 50px 0 0;

                     

3.border-radius: 0 0 50px 0;

4.border-radius: 0 0 0 50%;

　　以上實例就能說明50%設置的底層原理，以所在位置為起點，以水平50%/50px，垂直50%/50px的點為圓心，50%/50px為半徑畫圓。與原本div的起點的重疊部分。

那么這個圓是怎么畫出來的呢？

                     

當然不是直接在50%的位置以50%的長度畫圓啦

是四個圓心畫出來的四個圓與原來的div對應方向重疊成的圓

---

 拓展問題

          1.可以為負值嗎？

             圓的半徑還有負值 ？？？

             結論就是沒有負值

           2.boeder-radius的最大值是多少???  (width:100px;height:100px;backgeound-color:red;)

                    情況1>  border-top-left-radius:100px ;        /*100%*/

            

                    情況2> border-top-left-radius:150px;

              

          width=height時  值最大為寬高值

               那如果是長方形呢？？？？

              假如（width:200px;height:100px;background-color:red;）

               情況1> 根據上述結論我們直接設置

            border-top-left-radius:200px;

                     

                        嗯  ~~~     貌似是選取了width與height的較小一個值呢

                  情況2>  大膽一點兩個值都設置

            border-top-left-radius:200px 100px;

                     

                       這個情況??補充一個小知識點：border-top-left-radius:x y;

                        nanana也就是x軸平移200px,y軸平移100px（由左往右）

                情況3>更大膽一點

            border-top-left-
                radius:2000px 100px

                   

                               當分開寫的時候，最大值超過寬高的最大值，會按照比例，寬高的最大等比進行縮放

                               （當圖片過大GPU渲染會發生偏差，可能不一樣）

                 3.如果有border設置又是什么情況呢？？？

    .demo{
       width:100px;
       height:100px;
       border:20px solid blue;
       background-color:red;
       border-radius:20px 0 0 0 ;
     }

                     

 

---

idea來源於“渡一教育”