欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css3圓角邊框和邊框陰影示例

  發(fā)布時(shí)間：2014-05-05 15:44:58   作者：佚名   我要評(píng)論
這篇文章主要介紹了css3圓角邊框和邊框陰影示例,需要的朋友可以參考下

border-radius向元素添加圓角邊框，css3中的。IE9+ chrome safari5+ firefox4+ 現(xiàn)在都支持?？梢韵騣nput div等設(shè)置邊框。與border相似，可以四個(gè)角一起設(shè)置，也可以單獨(dú)設(shè)置。

語(yǔ)法：

復(fù)制代碼
代碼如下:

border-radius: 1-4 length|% / 1-4 length|%;
-moz-border-radius:10px;支持舊的firefox
-webkit-border-radius:10px;支持chrome

按top-left, top-right, bottom-right, bottom-left順序設(shè)置每個(gè) radius 的值。如果省略 bottom-left，則與 top-right 相同。如果省略 bottom-right，則與 top-left 相同。如果省略 top-right，則與 top-left 相同。

例子1:

復(fù)制代碼
代碼如下:

border-radius:2px;

等價(jià)于：

復(fù)制代碼
代碼如下:

border-top-left-radius:2px;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
border-bottom-left-radius:2px;

例子2:

復(fù)制代碼
代碼如下:

border-radius:2em 1em 4em / 0.5em 3em;

等價(jià)于：

復(fù)制代碼
代碼如下:

border-top-left-radius:2em 0.5;
border-top-right-radius:1em 3em;
border-bottom-right-radius:4em 0.5em;
border-bottom-left-radius:1em 3em;

 
box-shadow向框添加一個(gè)或多個(gè)陰影。IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 屬性。

語(yǔ)法：

復(fù)制代碼
代碼如下:

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow,v-shadow必須。水平，垂直陰影的位置。允許賦值。blur可選，模糊距離。spread可選，陰影的尺寸。color可選，陰影的顏色。inset可選，將外部陰影（outset）改為內(nèi)部陰影。

例子：

復(fù)制代碼
代碼如下:

box-shadow: inset 3px 3px 6px #ccc;

相關(guān)文章

最新評(píng)論