使用纯CSS3创建一个纺锤形分隔线_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:22:58
원래의
1695명이 탐색했습니다.

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

简单讲就是两头小,中间大。如下所示(请忽略中间的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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!