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

使用纯CSS3创建一个纺锤形分隔线相关推荐

如何使用纯CSS3创建一个简单的五角星图形
我们可以使用SVG.Canvas.CSS3或者背景图片来实现五角星图案及其悬停效果. CSS3引入的伪元素和变换特性使得实现五角星图形非常简单,并且可以结合渐变实现更为漂亮的效果. 因此使用图片实现五 ...
css旋转按钮制作,css3 旋转按钮使用CSS3创建一个旋转可变色按钮
想把访客引到另一个页面?添加一个很炫的按钮是个很好的办法 !今天的文章提出了如何使用css3创建一个旋转,旋转,可变色按钮. 这是一个演示旋转的css3按钮.让我们先从html: 复制代码代码如下: ...
使用纯CSS3实现一个3D旋转的书本
有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种, 无需复杂的建模过程,使用图片和CSS3的一些变换即可实现更好的展示效果,简洁而实用. 书本的3D模 ...
html设计动画小黄人,用纯css3画一个小黄人并实现动画效果
[摘要] 本文用纯css3画出一个动态的小黄人页面,代码简洁高效,是一个非常实用的CSS3学习案例. 不得不说CSS3的出现让网页更加绚丽生动,以前需要用图片来实现的效果现在完全可以通过几段css来解 ...
php日历css样式,如何在HTML5和CSS3创建一个日历图标
你有没有看到西蒙娜萨拉的最近的一篇文章, 如何在Photoshop中创建一个日历应用程序图标 ? 它看起来很棒,非常适合智能手机的日历应用程序,是大家非常关注的,因为我们进入2014年. 有没有可能建 ...
java3D实现空间立方体,纯CSS3实现一个旋转的3D立方体盒子
简单介绍上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果注:代码在chrome 43.0.2357 ...
如何使用纯CSS3实现一个沙漏动画
要实现一个沙漏动画,我们首先需要实现一个漏斗的几何形状. 漏斗图形我们接着把漏斗拆分成3个简单图形:一个三角形,一个倒置三角形和中间的管道(垂直线). 那么问题就简化为实现三角形和直线. 要实现三角 ...
html鼠标滑入滑出效果,CSS3创建一个滑出滑入的动画
有时候我们需要在网站上的边栏上放一个客户帮助的表单,开始是放一个按钮在那里,点击之后滑出内容来,一般这种效果我们会用js来控制.现在CSS3也可以做到了哦. 不知道什么意思吗?看看这个演示这个是怎么 ...
Windows编程第一课:纯手工创建一个窗体
第一节创建应用程序主窗体 1 创建消息处理函数 LRESULT CALLBACK fWinProc(HWND hWnd, UINT uMsg, WPARAM wParam, LPARAM lPara ...

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

使用纯CSS3创建一个纺锤形分隔线相关推荐

最新文章

热门文章