纺锤形分割线用于仿真纸中间被剪开时的阴影效果，也就是中间咧开而两边收拢的情况。
简单讲就是两头小，中间大。如下所示（请忽略中间的wow图标）：
使用CSS3来实现这种效果，可以使用border-radius和box-shadow两个属性。
首先我们需要一个DIV来容纳分割线。
立即学习“前端免费学习笔记（深入）”；
<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
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
196
收藏
