css border

妙用css border-radius的使用

方式/步調

1
border-radius 給元素添加圓角邊框，這是一個簡寫屬性，是border-top-right-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius簡寫的一個屬性。
語法：
border-radius: 1-4 length | % / 1-4 length | % 1-4 length;
注：border-radius最多可以設置八個值，也可以只設置一個值，下面的設置都是有用的。
2
語法詮釋如下圖：
border-radius是由border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius簡寫當作的，這個四個屬性別離對應元素的四個角，同時每個角有兩個偏向，所以border-radius最多可以取8個值。按照CSS的取值挨次‘top - right - bottom -left’。
設置一個值時，所有的值都不異；
設置兩個值：top bottom不異，left right不異；
設置三個值：top （left right不異） bottom；
設置四個值：top left right bottom；
border-radius 中呈現 ‘/’ 為程度半徑 / 垂直半徑。
3
border-radius 是若何畫圓角的
top-left為例，設置50px的圓角，是從元素top-left的極點界說為（0，0）然后把圓心平移到（50，50）畫圓，所獲得的邊框。若是top-left設置的值分歧，同樣平移到坐標點，則畫橢圓。其他top-right、bottom-left、bottom-right同理。
4
border-radius 畫圓
5
border-radius 畫橢圓
6
border-radius 畫雞蛋
END