使用純CSS3創建一個紡錘形分隔線


紡錘形分割線用於仿真紙中間被剪開時的陰影效果,也就是中間咧開而兩邊收攏的情況。

簡單講就是兩頭小,中間大。如下所示(請忽略中間的wow圖標):


使用CSS3來實現這種效果,可以使用border-radius和box-shadow兩個屬性。

首先我們需要一個DIV來容納分割線。

<div class="mask"></div>
接下來我們利用class=mask的div來生成框陰影:

box-shadow: 0 0 8px black;

對照box-shadow的語法:


這條語句表示模糊距離為8px,顏色為黑的框陰影,如下所示:


我們得到的是等高的陰影,現在需要想辦法把它變成由中間向兩邊漸漸變窄。

設置該元素的border-radius剛好可以得到這樣的弧度:

border-radius: 125px/12px;


上面的代碼以斜杠分開的兩個尺寸,表示該元素轉角處圓弧的水平半徑為125px,垂直半徑為12px。顯然是一個扁長的橢圓形。

我們觀察下,這個橢圓元素的下半邊部分和我們想要的紡錘形有點像,只是需要把其余地方擋住即可。

我們把該元素放到一個容器中,設置容器隱藏溢出內容(overflow:hidden),高度比分割線元素小幾個px,並細調兩者的相對位置,

使得容器剛好可以遮擋掉不需要的部分。但這樣需要使用2個元素,而且其關聯性不明顯,代碼可維護性不高。

因此我們使用偽元素來做一點改進,把分割線陰影設置成元素的:after偽元素,代碼如下:

.mask {    overflow: hidden;    height: 20px;}.mask:after {    content: '';    display: block;    margin: -25px auto 0;    width: 100%;    height: 25px;    border-radius: 125px/12px;    box-shadow: 0 0 8px black;}
這樣我們就得到了一條紡錘形分隔線。我們可以用這條分隔線來隔離標題圖標和正文。

你可以自己在線試試看 (http://wow.techbrood.com/fiddle/6897)。

by iefreer


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com