使用純CSS3創建一個紡錘形分隔線
紡錘形分割線用於仿真紙中間被剪開時的陰影效果，也就是中間咧開而兩邊收攏的情況。
簡單講就是兩頭小，中間大。如下所示（請忽略中間的wow圖標）：
使用CSS3來實現這種效果，可以使用border-radius和box-shadow兩個屬性。
首先我們需要一個DIV來容納分割線。
<div class="mask"></div>接下來我們利用class=mask的div來生成框陰影：
box-shadow: 0 0 8px black;
對照box-shadow的語法：
我們得到的是等高的陰影，現在需要想辦法把它變成由中間向兩邊漸漸變窄。
設置該元素的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
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。