box-shadow技巧分享

box-shadow

box-shadow在定义里是这么说的："box-shadow 属性向框添加一个或多个阴影。"

是的，和他的名字一样，这个属性固然是用来制造阴影效果让页面更有立体感的。

语法：

box-shadow: h-shadow v-shadow blur spread color inset;其中属性分别为：h-shadow：必需。水平阴影的位置。允许负值。v-shadow：必需。垂直阴影的位置。允许负值。blur：可选。模糊距离。spread：可选。阴影的尺寸。color：可选。阴影的颜色。请参阅 CSS 颜色值。inset：可选。将外部阴影 (outset) 改为内部阴影。

浏览器支持：IE9 、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。

我从慕课网上看到Amy老师讲的 css3"图片阴影"效果 一课里学到不少，其中就提到了曲线阴影和翘边阴影。课程链接：http://www.imooc.com/learn/240

曲线阴影

原理：

　　　给元素本身设置阴影，再利用befor以及after伪类创建元素，给伪类也设置同样的阴影，让三个阴影重叠就实现了炫酷的阴影效果。(●'◡'●)

代码：

　　html:　　　　　

<div class="wrap effect">
　　　　　　 <h1>shadow effect</h1>
　　　　 </div>

　　css:

　　　　.wrap{
　　　　　　width: 70%;
　　　　　　height: 200px;
　　　　　　margin: 50px auto;
　　　　　　background: #fff;
　　　　　　}
　　　　.wrap h1{
　　　　　　font-size: 20px;
　　　　　　text-align: center;
　　　　　　line-height: 200px;
　　　　　　}
　　　　.effect{
　　　　　　position: relative;
　　　　　　box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
　　　　　　-webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
　　　　　　-moz-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
　　　　　　-o-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
　　　　　　}
　　　　.effect:after,.effect:before{
　　　　　　content: '';
　　　　　　position: absolute;
　　　　　　background: #fff;
　　　　　　top: 50%;
　　　　　　bottom: 0px;
　　　　　　left: 10px;
　　　　　　right: 10px;
　　　　　　box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
　　　　　　-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
　　　　　　-o-box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
　　　　　　-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
　　　　　　border-radius:100px/10px ;
　　　　　　z-index: -1;
　　　　　　}

翘边阴影

原理：

　　与曲线阴影类似，利用两个伪类创造阴影效果，利用transform改变伪类形状成为平行四边形，分别一左一右的方向。

代码：

　　html：　　　

　　css：　

　　　　.box li{
　　　　　　width: 240px;
　　　　　　height: 240px;
　　　　　　list-style: none;
　　　　　　float: left;
　　　　　　margin: 20px 10px;
　　　　　　border: 2px solid #efefef;
　　　　　　box-shadow: 0 1px 4px rgba(0,0,0,0.27);
　　　　　　-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27);
　　　　　　-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27);
　　　　　　-o-box-shadow: 0 1px 4px rgba(0,0,0,0.27);
　　　　　　position: relative;
　　　　　　background: #fff;
　　　　　　}
　　　　.box li>img{
　　　　　　display: block;
　　　　　　margin: 11px;
　　　　}
　　　　.box li:before{
　　　　　　content: '';
　　　　　　position: absolute;
　　　　　　width: 90%;
　　　　　　left: 20px;
　　　　　　bottom: 10px;
　　　　　　background: transparent;
　　　　　　box-shadow: 0 8px 10px rgba(0,0,0,0.6);
　　　　　　-webkit-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
　　　　　　-moz-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
　　　　　　-o-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
　　　　　　z-index: -1;
　　　　　　transform: skew(-10deg) rotate(-7deg);
　　　　　　-webkit-transform: skew(-10deg) rotate(-7deg);
　　　　　　-o-transform: skew(-10deg) rotate(-7deg);
　　　　　　-moz-transform: skew(-10deg) rotate(-7deg);
　　　　　　-ms-transform: skew(-10deg) rotate(-7deg);
　　　　}
　　　　.box li:after{
　　　　　　content: '';
　　　　　　position: absolute;
　　　　　　width: 90%;
　　　　　　height: 80%;
　　　　　　left: 20px;
　　　　　　bottom: 10px;
　　　　　　background: transparent;
　　　　　　box-shadow: 0 8px 10px rgba(0,0,0,0.6);
　　　　　　-webkit-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
　　　　　　-moz-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
　　　　　　-o-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
　　　　　　z-index: -1;
　　　　　　transform: skew(10deg) rotate(7deg);
　　　　　　-webkit-transform: skew(10deg) rotate(7deg);
　　　　　　-o-transform: skew(-10deg) rotate(7deg);
　　　　　　-moz-transform: skew(10deg) rotate(7deg);
　　　　　　-ms-transform: skew(10deg) rotate(7deg);
　　　　}

大家可以把代码复制粘贴，自己查看一下元素研究一下具体详情，还有不懂的可以直接打开上面提到的课程自行学习。

福利：

喜欢偷懒的直接拿去复制粘贴吧，我经常用到的阴影代码

box-shadow:3px 2px 7px #DCDCDC, 2px 2px 5px #DCDCDC;
-webkit-box-shadow:3px 2px 7px #DCDCDC, 2px 2px 5px #DCDCDC;
-moz-box-shadow:3px 2px 7px #DCDCDC, 2px 2px 5px #DCDCDC;

box-shadow技巧分享相关推荐

java培训面试技巧分享
很多人在学会java技术之后,就开始筹备自己的面试了,java技术在互联网行业的需求是很大的,所以内卷是很严重的,在面试环节一定要全力以赴才行,下面小编就教大家一些java培训面试技巧,希望能帮助到大 ...
python dry原则_python使用建议与技巧分享（一）
这是一个系列文章,主要分享python的使用建议和技巧,每次分享3点,希望你能有所收获. 1 如何创建指定长度且有特定值的list 不推荐方式 list1 = [0, 0, 0, 0, 0, 0, 0 ...
html中投影效果图,利用CSS3（box shadow）制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
python处理大量excel数据-使用python将大量数据导出到Excel中的小技巧分享
(1) 问题描述:为了更好地展示数据,Excel格式的数据文件往往比文本文件更具有优势,但是具体到python中,该如何导出数据到Excel呢?如果碰到需要导出大量数据又该如何操作呢? 本文主要解决以 ...
python输出数据到excel-使用python将大量数据导出到Excel中的小技巧分享
(1) 问题描述:为了更好地展示数据,Excel格式的数据文件往往比文本文件更具有优势,但是具体到python中,该如何导出数据到Excel呢?如果碰到需要导出大量数据又该如何操作呢? 本文主要解决以 ...
微信公众平台前端开发技巧分享
这个是第三方跳转的网站微信公众平台前端开发技巧分享微信公众平台新版微信做了更改,此文提到的部分方法可能已经不再适用,请关注微信官方开放平台:http://open.weixin.qq.com/d ...
数学建模论文写作小技巧分享
学习网址 :哔哩哔哩网站[数学建模论文写作小技巧分享] 数学建模论文写作小技巧分享数学建模-论文-各部分-写作-指导数学建模[建模竞赛与论文写作] 目录 P1 [必看]代码.论文查重问题怎么 ...
一些Java面试技巧分享，你不能错过！
很多人在学会java技术之后,就开始筹备自己的面试了,java技术在互联网行业的需求是很大的,所以内卷是很严重的,在面试环节一定要全力以赴才行,下面小编就教大家一些java面试技巧,希望能帮助到大家. ...
SharePoint 2013技巧分享系列 - 同步Exchange显示高清用户照片
在"SharePoint 2013技巧分享系列 - Active Directory同步显示用户照片"文中介绍了如何同步Active Directory显示用户照片,但是同步完成后 ...
Redis基本使用及百亿数据量中的使用技巧分享
作者:依乐祝原文地址:https://www.cnblogs.com/yilezhu/p/9941208.html 作者:大石头时间:2018-11-10 晚上20:00 地点:钉钉群(组织代码B ...

box-shadow技巧分享

box-shadow技巧分享相关推荐

最新文章

热门文章