css 之 border-radius屬性

標籤：原理   解決   img   常見   瀏覽器安全色   blog   pre   width   難解   

 

　　css中給盒子設定圓角可以通過 border-radius 屬性來實現(具體原理就不深入探討了);

　　在開發過程中都會遇到瀏覽器安全色問題,這問題其實也不難解決,無非就是加上私人首碼,在這裡先忽略掉.

　　 border-radius 有四個屬性:

　　　　　　border-top-left-radius，//左上方

　　　　　　border-top-right-radius，//右上方

　　　　　　border-bottom-right-radius，//右下角

　　　　　　border-bottom-left-radius，//左下角

　　屬性取值:初始值為 0 , 可以取具體值,也可取值百分比(水平方向以寬度為基數,垂直方向以高度為基數)

　　下面是幾種常見用法:

　　　　1. 同時設定4個角落的形狀的半徑的時候不能超過50%;

 　　　                           

　　2. 設定兩個值:

　　　　　　　100px: 設定的是 左上方 和 右下角;

　　　　　　　30px: 設定的是 右上方 和 左下角;

 

　　3. 設定三個值:

　　　　　100px: 設定的是 左上方 ;

　　　　　50px: 設定的是 右上方 和 左下角;

　　　　　30px: 設定的是 右下角;

　　　　

　　　　　　　　　　

 

　　　　4. 設定4個值:

　　　　　　到了這裡大家應該就可以推論出4個值控制的順序了,沒錯,就是

　　　　　　左上-->右上-->右下-->左下;
　　　　　　

border-radius: 100px 50px 30px 60px;

　　　　　　

　　5.還有一種寫法就是設定橢圓時比較常用:

　　　　

border-radius: 100px 10px / 100px 10px;

　　　　"/" 之前代表:  top   top   bottom bottom

　　　　"/" 之後代表:  left  right   right      left

 

 

                

　　說到設定橢圓好多人對這一寫法都是比較懵懵的,很難弄清這一原理,剛開始的時候小胖在這裡也是一臉懵逼的研究這玩意兒,後來就想了一個簡單的方法:

　　就是根據每條線減多少, 然後兩點之間畫弧, 因為看其他教程上的什麼畫圖什麼的, 小胖是看不懂這些玩意的,所以只能想一個自己理解的法子了.

　　

　　有興趣的夥伴可以通過 html+css 來實現這個小 demo:

　　　　　　　　　　　　　　　

 

 

 

 

 

　　

 　　

 

css 之 border-radius屬性