使用纯CSS3创建一个纺锤形分隔线

原文出处： http://blog.csdn.net/iefreer/article/details/50972896

纺锤形分割线用于仿真纸中间被剪开时的阴影效果，也就是中间咧开而两边收拢的情况。

简单讲就是两头小，中间大。如下所示（请忽略中间的wow图标）：

使用CSS3来实现这种效果，可以使用border-radius和box-shadow两个属性。

首先我们需要一个DIV来容纳分割线。

[html]  view plain  copy

 

1. <div class="mask"></div>  

接下来我们利用class=mask的div来生成框阴影：

[css]  view plain  copy

 

1. box-shadow: 0 0 8px black;  

对照box-shadow的语法：

这条语句表示模糊距离为8px，颜色为黑的框阴影，如下所示：

我们得到的是等高的阴影，现在需要想办法把它变成由中间向两边渐渐变窄。

设置该元素的border-radius刚好可以得到这样的弧度：

[css]  view plain  copy

 

1. border-radius: 125px/12px;  

上面的代码以斜杠分开的两个尺寸，表示该元素转角处圆弧的水平半径为125px，垂直半径为12px。显然是一个扁长的椭圆形。

我们观察下，这个椭圆元素的下半边部分和我们想要的纺锤形有点像，只是需要把其余地方挡住即可。

我们把该元素放到一个容器中，设置容器隐藏溢出内容（overflow:hidden），高度比分割线元素小几个px，并细调两者的相对位置，

使得容器刚好可以遮挡掉不需要的部分。但这样需要使用2个元素，而且其关联性不明显，代码可维护性不高。

因此我们使用伪元素来做一点改进，把分割线阴影设置成元素的:after伪元素，代码如下：

[css]  view plain  copy

 

1. .mask {  
2.     overflow: hidden;  
3.     height: 20px;  
4. }  
5. .mask:after {  
6.     content: '';  
7.     display: block;  
8.     margin: -25px auto 0;  
9.     width: 100%;  
10.     height: 25px;  
11.     border-radius: 125px/12px;  
12.     box-shadow: 0 0 8px black;  
13. }  

这样我们就得到了一条纺锤形分隔线。我们可以用这条分隔线来隔离标题图标和正文。

html

<div class="or-spacer">
    <div class="mask"></div>
    <span><i>wow</i></span>
</div>

<div class="or-spacer-vertical left">
    <div class="mask"></div>
</div>

<div class="or-spacer-vertical right">
    <div class="mask"></div>
</div>

css

.or-spacer {
    margin-top: 100px;
    margin-left: 100px;
    width: 400px;
    position: relative;
}
.or-spacer .mask {
    overflow: hidden;
    height: 20px;
}
.or-spacer .mask:after {
    content: '';
    display: block;
    margin: -25px auto 0;
    width: 100%;
    height: 25px;
    border-radius: 125px/12px;
    box-shadow: 0 0 8px black;
}
.or-spacer span {
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: 100%;
    margin-bottom: -25px;
    left: 50%;
    margin-left: -25px;
    border-radius: 100%;
    box-shadow: 0 2px 4px #999;
    background: white;
}
.or-spacer span i {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    right: 4px;
    border-radius: 100%;
    border: 1px dashed #aaa;
    text-align: center;
    line-height: 40px;
    font-style: normal;
    color: #999;
}
.or-spacer-vertical {
    display: inline-block;
    margin-top: 100px;
    margin-left: 100px;
    width: 100px;
    position: relative;
}
.or-spacer-vertical .mask {
    overflow: hidden;
    width: 20px;
    height: 200px;
}
.or-spacer-vertical.left .mask:after {
    content: '';
    display: block;
    margin-left: -20px;
    width: 20px;
    height: 100%;
    border-radius: 12px/125px;
    box-shadow: 0 0 8px black;
}
.or-spacer-vertical.right .mask:before {
    content: '';
    display: block;
    margin-left: 20px;
    width: 20px;
    height: 100%;
    border-radius: 12px/125px;
    box-shadow: 0 0 8px black;
}

你可以自己在线试试看 （http://wow.techbrood.com/fiddle/6897）。

by iefreer