原文出處：
紡錘形分割線用於**紙中間被剪開時的陰影效果，也就是中間咧開而兩邊收攏的情況。
簡單講就是兩頭小，中間大。如下所示（請忽略中間的wow圖示）：
使用css3來實現這種效果，可以使用border-radius和box-shadow兩個屬性。
首先我們需要乙個div來容納分割線。
[html]view plain
copy
<
divclass
="mask"
>
div>
接下來我們利用class=mask的div來生成框陰影：
[css]view plain
copy
box-shadow:
0 08px
black
;
對照box-shadow的語法：
這條語句表示模糊距離為8px，顏色為黑的框陰影，如下所示：
我們得到的是等高的陰影，現在需要想辦法把它變成由中間向兩邊漸漸變窄。
設定該元素的border-radius剛好可以得到這樣的弧度：
[css]view plain
copy
border-radius:
125px
/12px
;
上面的**以斜槓分開的兩個尺寸，表示該元素轉角處圓弧的水平半徑為125px，垂直半徑為12px。顯然是乙個扁長的橢圓形。
我們觀察下，這個橢圓元素的下半邊部分和我們想要的紡錘形有點像，只是需要把其餘地方擋住即可。
我們把該元素放到乙個容器中，設定容器隱藏溢位內容（overflow:hidden），高度比分割線元素小幾個px，並細調兩者的相對位置，
使得容器剛好可以遮擋掉不需要的部分。但這樣需要使用2個元素，而且其關聯性不明顯，**可維護性不高。
因此我們使用偽元素來做一點改進，把分割線陰影設定成元素的:after偽元素，**如下：
[css]view plain
copy
.mask
.mask:after
這樣我們就得到了一條紡錘形分隔線。我們可以用這條分隔線來隔離標題圖示和正文。
html
wow
.or-spacer
.or-spacer .mask
.or-spacer .mask:after
.or-spacer span
.or-spacer span i
.or-spacer-vertical
.or-spacer-vertical .mask
.or-spacer-vertical.left .mask:after
.or-spacer-vertical.right .mask:before
使用純CSS3實現乙個日食動畫
日食現象是月亮擋在了地球和太陽之間，也就是月亮遮擋住了太陽。所以要構造日食，我們須要2個物件 乙個代表月亮，乙個代表太陽。我們把整個日食過程分解為3個階段 1.緩慢移入 2.短暫停留 3.緩慢移出。在此期間。會產生3個彼此關聯的動畫。首先是月亮的位置移動，我們通過改變月亮的x座標 left或righ...
乙個發光的搜尋邊框（純CSS3）
這是效果圖，邊框會不停的閃，相容各種瀏覽器 html body div class container form method post action div class input group input type text placeholder 請告訴我，你在尋找什麼 span class i...
css 使用css3畫乙個扇形
四個半圓疊加，過半調整 z index container div fan 1,fan 3 fan 2,fan 4 fan 1,fan 2 fan 3,fan 4 fan 4 fan 2 fan 3 keyframes zindex 50 50.000001 to keyframes rotate ...