使用純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