武林網(www.survivalescaperooms.com)文章簡介：熟練使用border-radius.

這個實例的目的：熟練使用border-radius

涉及的屬性：border-radius 、linear-gradient 、 box-shadow

提示:“:before” “:after”,IE對after、before是不支持的，請在firefox、opera、chrome下試調！

要求瀏覽器：firefox、opera、chrome

效果圖：

先看下大致的步驟：

1.定義class，繪制一個矩形；

2.用border-radius屬性進行對其圓角處理；

3.使用pseudo元素創建蜷縮角；

4.創建條文漸變的效果。

詳細步驟

第一步：定義class，繪制一個矩形：

<a class="docIcon" href="#">Document Icon</a>

這里要注意下：“display“默認屬性值是“inline”,所以我們要使用“block”這個屬性值以保證其正確顯示：

這里的linear-gradient是漸變效果設置。

下面加上陰影效果，使用“box-shadow ”屬性來實現：

這里的box-shadow是陰影效果設置。

到目前為止，我們完成了下面的效果，如圖：

第二部：用border-radius屬性進行對其圓角處理：

Border-radius的定義、用法請點擊此處了解。代碼：

如圖：

Ps:這里要著重提示下：before是一個偽類選擇器，僅支持firefox、opera、chrome。

大家可能對下面倆步不太了解，這個沒關系，我會針對它們另外寫一篇詳細的文章。在這個實例當中，大家只要知道我們用到過"：before""：after"這個倆個偽類選擇器即可。

第三部：蜷縮角

首先，添加“:before”，我們需要創建一個15px的矩形并應用背景漸變：

接下來我們要實現右上角圓角的效果，我們使用相同的方法進行對齊：

...

-webkit-border-radius:3px 15px 3px 3px;

-moz-border-radius:3px 15px 3px 3px;

border-radius:3px 15px 3px 3px;

下面是我們目前實現的效果：

第四步：添加條文漸變效果：

下面我們使用“:after”來實現效果，我們出示高度定位0,0。我們應用整體寬度的60%，再加上

margin-left和margin-right各20%（也就是100%）：

用CSS3實現多條線漸變：

最后結果：