box-shadow页面立体效果

我们先看一下将要实现的效果

第一眼看到这种效果以为是div堆叠出来的,翻开源码发里面主要用的是css的box-shadow 属性的方法
box-shadow 常规的使用方法如下

box-shadow: h-shadow v-shadow blur spread color
/*blur 模糊距离*/
/*spread 阴影的尺寸*/

很少有人在box-shadow后面使用多个值,下面的代码便是实现上面效果的关键

box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),     ----①0 8px 0 -3px #f6f6f6,             ----②0 9px 1px -3px rgba(0,0,0,0.2),   ----③0 16px 0 -6px #f6f6f6,            ----④0 17px 1px -6px rgba(0,0,0,0.2);  ----⑤

这些阴影作用在一个单独的元素上,因为只做生成阴影用,我们可以利用css的:before来优化代码

①的代码通过before添加的元素给主div一个底边框的效果,
②将阴影下移8px,阴影尺寸收缩3px,第一层立体效果,此时是没有底边框效果的
③给第一层阴影加一个底边框
④⑤的效果是同上,改变的只是阴影的位置

最终代码如下,由于box-shadow只支持IE9+,因此IE9+都是可以实现这种效果的

<style type="text/css">#box-shadow {width: 500px;height: 200px;border: 1px solid #ddd;margin: 0 auto;box-shadow: 0px 10px 20px 0 rgba(0,0,0,0.2) ;position: relative;}#box-shadow:before{content: "";position: absolute;height: 50px;left: 0;right: 0;bottom: 0;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0,0,0,0.2), 0 16px 0 -6px #f6f6f6, 0 17px 1px -6px rgba(0,0,0,0.2);}
</style>

box-shadow页面立体效果相关推荐

html如何实现立体效果,在页面中怎么用css让图片有立体感的效果?（代码实测）...
网页页面上如果出现立体感的图片,总会让人有种高科技的感觉.其实立体感的设计并不难,我们可以通过css实现立体感的效果.非常简单易懂,首先我们可以有这样的简单思路,为了突显立体感,要让阴影左右重中间轻, ...
Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
html中投影效果图,利用CSS3（box shadow）制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
element-UI栅格系统缩放，导致页面布局效果bug? 叠加？错位？
这里以此代码片段为例说明一则bug,请bug对号入座.(bug截图省略) 页面的栅格缩放,导致页面布局发生叠加错位? 一.坑1 · 引言: (先来一则bug代码) <el-card v-for= ...
JS 实现3D立体效果的首页轮播图（瞬间让你的网站高大上，逼格满满）
还是那句话,废话少说,直接上源代码:http://download.csdn.net/detail/cometwo/9387901 <html> <head> <titl ...
几行CSS让你的页面立体起来
关注「豆皮范儿」,回复"加群" 加入我们一起学习,每天进步一点点 Hello,豆皮粉们,我来了,这回约稿又得到来自字节跳动的"米兰的小铁匠" ,几行CSS让你的 ...
html5 鼠标滑动页面动画效果,鼠标滑动到当前页面触发动画效果
近年来,关于鼠标滑动到当前页面从而触发动画效果十分的火热,今天我们就来学习下这一效果. 一.首先,我们先来了解一下这一效果实现的原理 1.一个网页离不开基本的布局,所以首先就是要先用html将所需要的 ...
基于Laya实现ViewPager页面切换效果
前言页面切换效果,Laya提供了ViewStack组件,可以切换页面,但是效果有些生硬,可以看看官网文档提供的效果.ViewStack组件我这里提供的效果是通过手势滑动实现页面切换,同时也可以通过 ...
用计算机做出牙膏盒立体效果制作,只用PPT基本功能，也能做出超惊艳的立体效果，像变魔术！...
前两天三顿看到小伙伴蛋蛋模仿花瓣网上的设计,做了一组作品: 怎么样?你们是不是也觉得很惊艳? 这么富有空间感的作品,一定要用PS.AI这种设计软件吧?完全不需要!整份作品都是由大家超熟悉的PPT所完成 ...

box-shadow页面立体效果

box-shadow页面立体效果相关推荐

最新文章

热门文章