css3實現邊框圓角樣式

2022-01-22 21:13:13 字數 860 閱讀 3734

基本語法:

border-radius: 5px;

相容大多數瀏覽器:

/*相容mozilla(firefox, flock等瀏覽器)*/

-moz-border-radius-topleft: 5px;

-moz-border-radius-topright: 5px;

-moz-border-radius-bottomright: 5px;

-moz-border-radius-bottomleft: 5px;

/*相容webkit (safari, chrome等瀏覽器)*/

-webkit-border-top-left-radius: 5px;

-webkit-border-top-right-radius: 5px;

-webkit-border-bottom-right-radius: 5px;

-webkit-border-bottom-left-radius: 5px;

/*相容opera瀏覽器*/

border-top-left-radius: 5px;

border-top-right-radius: 5px;

border-bottom-right-radius: 5px;

border-bottom-left-radius: 5px;

關於ie:

ie9 以下版本不支援 border-radius,而且 ie9 沒有私有格式,都是用 border-radius,其寫法和 opera 是一樣的

css3實現邊框圓角樣式

基本語法 border radius 5px 相容大多數瀏覽器 相容mozilla firefox,flock等瀏覽器 moz border radius topleft 5px moz border radius topright 5px moz border radius bottomright...

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 四個值 左上,右上,右下,左下 三個值 左上,右上和...