一、box-shadow问题探究

box-shadow 在MDN定义以及详解：

box-shadow 以由逗号分隔的列表来描述一个或多个阴影效果。该属性让你可以对几乎所有元素的边框产生阴影。如果元素同时设置了 border-radius ，阴影也会有圆角效果。多个阴影的z-ordering 和多个 text shadows 规则相同(第一个阴影在最上面)。inset默认阴影在边框外。

参数：

<offset-x> 设置水平偏移量，如果是负值则阴影位于元素左边。

<offset-y> 设置垂直偏移量，如果是负值则阴影位于元素上面。可用单位请查看 <length> 。如果两者都是0，那么阴影位于元素后面。这时如果设置了<blur-radius> 或<spread-radius> 则有模糊效果。

<blur-radius>模糊半径值越大，模糊面积越大，阴影就越大越淡。不能为负值。默认为0，此时阴影边缘锐利。

<spread-radius>扩展半径取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。

<color>相关事项查看 <color> 。如果没有指定，则由浏览器决定——通常是color的值，不过目前Safari取透明。

使用 inset 后，阴影在边框内（即使是透明边框），背景之上内容之下。

阴影大小

<spread-radius>才是用来控制阴影大小（扩展还是缩小）。如果没有设置扩展半径，那么阴影尺寸与元素大小相同。

.shadow{

width:40px;

height:40px;

margin:100px auto;

border:2px solid orange;

box-shadow:50px 50px 0px 0px #00ff00;

}

效果如下：

模糊半径是否影响阴影大小？

只要没有设置扩展半径，阴影实际的大小不改变。<blur-radius>的值用来控制模糊程度，并不控制阴影的大小。<blur-radius>就类似于于photoshop中的羽化半径。

.shadow1{

width:40px;

height:40px;

margin:100px auto;

border:2px solid orange;

box-shadow:50px 50px 10px 0px #00ff00, -50px 50px 40px 0px #00ff00;

}

扩展半径正负值对阴影大小的影响

.shadow1{

    width:40px;

    height:40px;

    margin:100px auto;

    border:2px solid orange;

    box-shadow:60px 60px 0 10px #00ff00;

}

.shadow2{

    width:40px;

    height:40px;

    margin:100px auto;

    border:2px solid orange;

    box-shadow:60px 60px 0 -10px #00ff00;

}

扩展半径如果是正的值，阴影扩展，如原来总宽高为44px的元素（包括边框2px），在设置10px扩展半径后，阴影的宽高会变为64px。

扩展半径如果是负的值，阴影收缩，如原来总宽高为44px的元素（包括边框2px），在设置-10px半径后，阴影的宽高会变为24px。

二、阴影问题解决

制作单边阴影时候常遇见这样一个情况，明明设置了x,y轴方向的偏移，为什么别的边还是有阴影出现。

.shadow1{

    width:100px;

    height:100px;

    margin:100px auto;

    border:2px solid orange;

    box-shadow:3px 10px 10px 0 #00ff00;

}

如果不想边框左边出现任何绿色阴影，那么我们需要将x方向的偏移量调大一下。

.shadow1{

    width:100px;

    height:100px;

    margin:100px auto;

    border:2px solid orange;

    box-shadow:8px 10px 10px 0 #00ff00;

}

可是元素右边的阴影太多了，如果将x偏移量改小了，左边就会出现阴影。

这种进退维谷的情况让人很奔溃。这其实模糊半径带来的问题，在设置模糊半径的时候（没有设置偏移量和扩展半径），发现元素四周会有阴影（羽化）的效果。

为了解决这个问题我们会不停调整左右的偏移量，其实我们应该调整元素扩展半径，让它变为负值，缩小阴影尺寸。

.shadow1{

    width:100px;

    height:100px;

    margin:100px auto;

    border:2px solid orange;

    box-shadow:3px 10px 10px -2px #00ff00;

}

三、制作阴影

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

    </head>

    <style>

        .shadow div{

            float:left;

            margin:50px 120px;

            width:100px;

            height:100px;

            border:2px solid orange;

            text-align:center;

            line-height:100px;

         }

        .left{

            box-shadow:-5px 0 10px -5px #00ff00;

        }

        .bottom{

            box-shadow:0 5px 10px -5px #00ff00;

        }

        .right{

            box-shadow:5px 0 10px -5px #00ff00;

        }

        .top{

            box-shadow:0px -5px 10px -5px #00ff00;

        }

        .left-top{

            box-shadow:-5px -5px 10px  -4px #00ff00;

        }

        .right-top{

            box-shadow:5px -5px 10px -4px #00ff00;

        }

        .left-bottom{

            box-shadow:-5px 5px 10px -4px #00ff00;

        }

        .right-bottom{

            box-shadow:5px 5px 10px -4px #00ff00;

        }

        .no-left{

            /* .right-bottom,.right-top组合 */

            box-shadow:5px 5px 10px -4px #00ff00,5px -5px 10px -4px  #00ff00;

        }

        .no-bottom{

            /* .left-top,.right-top组合 */

            box-shadow:-5px -5px 10px  -4px #00ff00,5px -5px 10px -4px  #00ff00;

        }

        .no-right{

            /* .left-top，.left-bottom组合 */

            box-shadow:-5px -5px 10px  -4px #00ff00,-5px 5px 10px -4px #00ff00;

        }

        .no-top{

            /* .left-bottom,,right-bottom组合 */

            box-shadow:-5px 5px 10px -4px #00ff00,5px 5px 10px -4px #00ff00;

        }

    </style>

    <body>

    <div class="shadow">

        <div class="left">左边阴影</div>

        <div class="bottom">底部阴影</div>

        <div class="right">右部阴影</div>

        <div class="top">顶部部阴影</div>

        <div class="left-top">左上阴影</div>

        <div class="right-top">右上阴影</div>

        <div class="left-bottom">左下阴影</div>

        <div class="right-bottom">右下阴影</div>

        <div class="no-left">无左阴影</div>

        <div class="no-bottom">无下阴影</div>

        <div class="no-right">无右阴影</div>

        <div class="no-top">无上阴影</div>

    </div>

    </body>

</html>

box-shadow制作各种单边，多边阴影的更多相关文章

分享div、text、Box Shadow(阴影)演示及代码的页面
附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html
如何设置box shadow的透明度
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box- ...
Box-shadow制作漂亮的外阴影输入框
背景:之前做项目中的一个移动端页面,关于在搜索框中输入信息查找对应的照片改了几次ui图之后,最终的搜索框的设计图如下: 开始做页面的时候,就想到了用box-shadow 来实现外阴影边框.用bord ...
使用packer制作vagrant centos box
使用packer制作vagrant box:centos 制作vagrant box,网上有教程,可以自己step by step的操作.不过直接使用虚拟在VirtualBox中制作vagrant b ...
Unity基础6 Shadow Map 阴影实现
这篇实现来的有点墨迹,前前后后折腾零碎的时间折腾了半个月才才实现一个基本的shadow map流程,只能说是对原理理解更深刻一些,但离实际应用估计还需要做很多优化.这篇文章大致分析下shadow ma ...
阴影锥(shadow volume)原理与展望
转记:找了不少关于shadow volume原理的资料,还是这个帖子讲解的一目了然,转帖在这里,方便查阅.引用链接:http://blog.donews.com/yyh/archive/2005/05 ...
Shadow Map -- 点阴影（全方位）
昨晚终于把点阴影(深度CubeMap)程序调通了,思想不难,基本就是在上节定向光阴影基础上稍作修改,但是CG程序不太方便Debug,需要输出中间效果图进行判断,耽搁了一会儿. 过程如下: 1.将深度渲 ...
css3 box
一.box-shadow介绍 box-shadow属性向box添加一个或多个阴影. 语法: box-shadow: offset-x offset-y blur spread color inset; ...
利用box-shadow制作loading图
我们见过很多利用css3做的loading图,像下面这种应该是很常见的.通常制作这种loading,我们会一个标签对应一个圆,八个圆就要八个标签.但是这种做法很浪费资源.我们可以只用一个标签,然后利用 ...

随机推荐

[WebGL入门]十五，为多边形涂抹颜色（顶点颜色的指定）
注:文章译自http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］.另外.鄙人webgl研究还不够深入.一些专业词语.假设翻译有误.欢迎大家指 ...
matplotlib 可视化 —— 绘制常见图形
0. 饼状图 plt.pie():Python数据可视化:饼状图 1. 三角形描点连线,起点和终点相同 triangle1 = ((0, sqrt(3)/2), (1, 3*sqrt(3)/2), ...
请问Typecho Mysql 数据库和Sqlite数据库我该如何选择。
纠结如我,又纠结了,请大家帮忙看一下我该如何选择.就一个没有文章的博客.一直用VPS太浪费,现在换成了虚拟主机.但是虚拟主机的MYSQL数据库限制连接数30个,我不懂这是个什么概念,但是我觉得30太少 ...
最短路径—Dijkstra 算法和Floyd 算法
某省自从实行了很多年的畅通工程计划后,终于修建了很多路.不过路多了也不好,每次要从一个城镇到另一个城镇时,都有许多种道路方案可以选择,而某些方案要比另一些方案行走的距离要短很多.这让行人很困扰. 现在 ...
ASP.NET WEB API微信支付通知接口，返回xml数据，微信服务器不识别问题
原文:ASP.NET WEB API微信支付通知接口,返回xml数据,微信服务器不识别问题版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/MrTra ...
Node实现简单的注册时后端的MVC模型架构
实现一个简单的注册界面后端MVC模型架构第一步:在生成的express框架的app.js中添加一个路由,代码如下:var api = require('./routes/api'); app.use ...
STM时钟
一.在STM32中,有五个时钟源,为HSI.HSE.LSI.LSE.PLL. ①HSI是高速内部时钟,RC振荡器,频率为8MHz. ②HSE是高速外部时钟,可接石英/陶瓷谐振器,或者接外部时钟源,频率 ...
题解 P3372 【【模板】线段树1 】
看了一下题解里的zkw线段树,感觉讲的不是很清楚啊(可能有清楚的但是我没翻到,望大佬勿怪). 决定自己写一篇...希望大家能看明白... zkw线段树是一种优秀的非递归线段树,速度比普通线段树快两道三 ...
struts2怎么返回一个字符串给jsp？(使用json)
我们都知道使用servlet时可以直接用PrintWriter对象的print方法来向页面传送一些字符串(可以是html标签和内容),然后在用RequestDispatcher来转向网页虽Strut ...
ArcGIS api for javascript——图形-增加图形到地图
描述本例展示了如何使用Draw工具栏在地图上描绘许多种类的几何体.ArcGIS JavaScript API包含工具栏. 工具栏不是一个在页面上自动地可见的用户界面组件.相反,工具栏是一个助手类,可 ...

box-shadow制作各种单边，多边阴影