大家都知道box-shadow是h5新增属性,用来实现盒子边缘有阴影的效果,但经常会看见许多场景里阴影的样式各种各样,并不是简单的四周有阴影的效果,它们是怎么实现的呢,今天就跟大家分享两种阴影实现的方法。
一、曲边阴影
效果图如下:它不仅是四周有阴影,下部还有一层曲边的阴影,它的原理其实很简单,首先盒子自身有阴影,然后在使用另一个有阴影的盒子重叠形成效果图里的曲边阴影。
首先说一下box-shadow的使用语法,它支持多个阴影的书写,中间用逗号隔开,如下
创建一个盒子,使用box-shadow给盒子一个x轴和y轴方向都是零晕染半径为10px的外阴影和内阴影。
style{ .box1{ width: 400px; height: 200px; background: white; border: 1px solid lightgrey; margin: 100px auto; text-align: center; line-height: 200px; box-shadow: 0 0 10px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.3) inset; } } body{ <div class="box1"> <span>曲边阴影</span> </div> }
使用after伪类选择器在box1子集的后面增加一个虚拟的标签,由于是一个虚拟标签,浏览器不能识别,需要定义display属性,给这个标签也加上阴影,由于是曲面的,所以需要设置border-radius使它有个弧度。然后使用定位将虚拟标签与原盒子重叠,并使用z-index改变层级,使它在div的下方。代码如下
.box1::after{ display: block; //必须写 content: ""; //必须写 z-index: -1; width: 390px; height: 150px; background: red; position: absolute; bottom: 0; left: 4px; border-radius: 30px/10px; box-shadow: 0 8px 10px rgba(0,0,0,0.3); }
当没有定位时,两个盒子的排列方式如下:
定位后就实现了曲边阴影:结果图如下:
二、翘边阴影
原理与曲边阴影一样,使用伪类选择器::afteryu , ::before增加两个虚拟标签,使用阴影的重叠实现翘边阴影。
代码如下:
.box2::after,.box2::before{ display: block; content: ""; z-index: -1; width: 170px; height: 240px; background: red; position: absolute; bottom: 20px; left: 38px; box-shadow: 30px 10px 40px rgba(0,0,0,0.5); transform: skewX(-15deg); } .box2::before{ box-shadow: -20px 10px 40px rgba(0,0,0,0.5); transform: skewX(15deg); }
为了方便我们看,给了红色背景,没改变层级时结果如下:
调整两个盒子的层级,效果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
行高line-height实现单行文本垂直居中 以前一直认为单行文本垂直居中要将高度和...
背景 京东购物小程序作为京东小程序业务流量的主要入口,承载着许多的活动和页面...
CSS3实现酷炫的3D旋转透视 3D动画效果现在越来越普及,已经被广泛的应用到了各个...
在ie下设置 css 样式 style="cursor:hand;" 可以正常显示 但是在firefox下就不行...
在讲CSS优先级之前,我们得要了解什么是CSS,CSS是用来做什么的。 首先,我们对C...
最近在做项目时,发现CSS3中关于动画的技术,自己很少运用在项目中,平时一些列...
一、作用 离线浏览 - 根据文件规则把资源缓存在本地,脱机依然能够访问资源,联...
Dreamweaver中如何使用Flash影片 1、首先需要我们准备的是一个Flash文件,其次最...
打开软件,我们按快捷键ctrl+n,建立一个新的文件。 点击常用,选择布局。 点击...
作者 / Krish Vitaldevara,Google Play 信任与安全产品管理总监 多年来,向数十...