CSS3邊框 圓角效果 border radius

2021-09-30 17:24:13 字數 410 閱讀 4100

border-radius是向元素新增圓角邊框。

使用方法:

border-radius:10px; /* 所有角都使用半徑為10px的圓角 */

border-radius: 5px 4px 3px 2px; /* 四個半徑值分別是左上角、右上角、右下角和左下角,順時針 */

不要以為border-radius的值只能用px單位,你還可以用百分比或者em,但css3相容性目前還不太好。

實心上半圓:

方法:把高度(height)設為寬度(width)的一半,並且只設定左上角和右上角的半徑與元素的高度一致(大於也是可以的)。

div實心圓:

方法:把寬度(width)與高度(height)值設定為一致(也就是正方形),並且四個圓角值都設定為它們值的一半。如下**:

div

css3實現邊框圓角內凹效果

我們知道在邊框的四個角實現圓角可以用border radius實現,如果在邊框中心實現邊框的內凹效果呢?效果如下圖 要實現上圖的效果可以分為五個步驟 源 如下 lang en charset utf 8 name viewport content width device width,initial...

CSS3邊框與圓角

border radius屬性 box shadow屬性 屬性值描述h shadow 設定陰影在水平方向上的偏移量 v shadow 設定陰影在豎直方向上的偏移量 blur 設定由陰影的邊框往陰影內部x長度進行漸變,x為blur的值 spread 設定原本的陰影圖案往上下左右四個方向分別擴充套件x長...

CSS3邊框與圓角

乙個最多可指定四個border radius屬性的復合屬性,這個屬性允許你為元素新增圓角邊框!語法 border radius 1 4 length 1 4 length 相容性 ie9 firefox4 chrome safari5 opera 四個值 左上,右上,右下,左下 三個值 左上,右上和...