CSS3实现曲线阴影和翘边阴影

往往我们在做一些特殊的阴影效果的时候，使用图片做背景的方式实际上是很差劲的，在不考虑适配老版本浏览器的前提下，我们可以使用css3的自定义出自己想要的阴影风格。

下面将以曲线阴影和翘边阴影为例，讲解自定义阴影的过程。
先来看下效果图

曲线阴影

曲线阴影其实可以使用双层阴影重叠的方式实现
我们将取消阴影的图片做下分解应该会更容易理解，示意图如下：

如上图，图1基础的阴影下，在加一个有弧度的阴影即可。
1、图1基础阴影很容易实现，内阴影+外阴影

.box-shadow1{box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
}

2、然后使用伪类在元素的后面添加一个“可适配”的阴影，为了可适配，我们就要使用相对定位，实现代码如下

.box-shadow1{position:relative;box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
}
.box-shadow1:after{content:"";position:absolute;background:transparent;top:50%; //设置宽高仅仅设置上下左右边距是为了让系统自动定位。bottom: 1px;left: 10px;right: 10px; z-index: -1; //将副阴影置于主阴影下box-shadow: 0 0 20px rgba(0,0,0,0.7); border-radius: 100px/10px;
}

如此即实现了曲线阴影的效果。

<div class="box box-shadow1">将box-shadow1作为类使用即可</div>

翘边阴影

同理，翘边阴影可以在基础阴影下叠加两个平行四边形即可。
这里就直接上分解图和源码了，不再做讲解

.box-shadow2{position:relative;box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
}
.box-shadow2:before,.box-shadow2:after{content: "";position:absolute; top:20px;bottom: 22px;  background: transparent; box-shadow: 0 8px 20px rgba(0,0,0,0.7);  z-index: -1; background: #fff;
}
.box-shadow2:before{ left: 22px;  right:12px; transform: skew(-12deg) rotate(-4deg);
}
.box-shadow2:after{  left: 12px;  right:22px; transform: skew(12deg) rotate(4deg);
}

css3 图片阴影、翘边效果相关推荐

图解css3：核心技术与案例实战. 3.3　CSS3图片边框属性
3.3 CSS3图片边框属性 border-image效果在CSS2中,只有使用背景图片来制作,而且制作过程非常复杂,做完后也很难维护.如今CSS3中增添了一个图片边框的属性,能够模拟出backgro ...
推荐12个绚丽的CSS3图片悬停效果
CSS3为我们开发提供了很多特效,如鼠标悬停,线性渐变,在web开发早期常用的是鼠标悬停,他是网页制作的常用特效之一,早期使用Flash可以制作非常炫的效果,后来慢慢演变成现在的是图片悬停效果,现在我 ...
boostrap 鼠标滚轮滑动图片_16种基于Bootstrap的css3图片hover效果
bootstrap-image-hover是一款基于Bootstrap的css3图片hover效果.这组图片hover效果共16种特效.同时该特效也支持非Bootstrap版本. 使用方法在页面中引 ...
CSS3图片跳动效果
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>CSS ...
CSS3图片上下移动的动画效果
CSS3图片上下移动的动画效果开发工具与关键技术:Adobe Dreamweaver CC 2018 作者:昨夜星辰撰写时间:2019年1月17日下面我们使用Adobe Dreamweaver ...
超厉害的CSS3图片破碎爆炸效果！
Java代码 var fx = { buffer : function(obj, cur, target, fnDo, fnEnd, fs){ if(!fs)fs=6; var now={}; ...
css3图片倾斜3D效果
css3图片倾斜3D效果这是一款非常炫酷图片3D倾斜动画,响应式的图片列表布局,鼠标悬停图片3D倾斜遮罩显示标题图标效果. 演示地址下载地址
20个超棒的CSS3图片切换灯箱效果教程推荐
CSS3中增加了诸多新的特性,借助这些特性,可以实现不可思议的效果.本文带来20个教程,教你如何使用CSS3创建引人注目的图片切换效果和灯箱效果. 点击小标题可以直接看效果 1. 创建带3D灯箱动画 ...
css3新增了哪三种边框效果,怎么在CSS3中实现一个边框效果
怎么在CSS3中实现一个边框效果发布时间:2021-03-11 18:01:54 来源:亿速云阅读:125 作者:Leah 怎么在CSS3中实现一个边框效果?相信很多没有经验的人对此束手无策,为此 ...

css3 图片阴影、翘边效果

CSS3实现曲线阴影和翘边阴影

曲线阴影

翘边阴影

css3 图片阴影、翘边效果相关推荐

最新文章

热门文章