CSS3半圓邊框是一種邊框樣式,可以給元素添加半圓角邊框,使界面更美觀。使用border-radius屬性可以實現。
/* 語法 */ border-radius: top-left top-right bottom-right bottom-left / x1 x2 y1 y2; /* 示例 */ border-radius: 50% 50% 0 0 / 100px 100px 0 0;
其中,border-radius屬性有兩個值,一個是圓角半徑值,一個是裁剪橢圓的x半徑值和y半徑值。圓角半徑值可以簡寫為一個數值或者一個百分比,也可以分別設置四個角的半徑值。橢圓的x半徑值和y半徑值可以簡寫為一個數值或者使用“/”符號分隔開分別設置四個角上的橢圓的半徑值。
如果圓角半徑值與橢圓的x半徑值和y半徑值之間的數值不一致,則用最小值進行拉伸,來實現半圓邊框的效果??梢酝ㄟ^在不同的角落設置不同的圓角半徑和橢圓半徑來實現異形半圓邊框效果。
注意:使用border-radius屬性時,一定要加上瀏覽器前綴,以兼容不同瀏覽器。例如:
-webkit-border-radius: 50% 50% 0 0 / 100px 100px 0 0; -moz-border-radius: 50% 50% 0 0 / 100px 100px 0 0; border-radius: 50% 50% 0 0 / 100px 100px 0 0;
上一篇css3動畫過度時間
下一篇css3動畫網頁動態