详解box-shadow

时间：2019-12-24 10:16:01 阅读：276 评论：0 收藏：0 [点我收藏+]

标签：width 完全 ack http 语法 margin image 魔法叠加

今天我们来探究一下“阴影”。
　　这个阴影可不是什么心理阴影。我们探究的阴影是图形学中的阴影。同学们可以先想想，在图片中有了阴影，或者使用了阴影之后，为我们的图像提供了哪些特殊的效果？在高中大家在学习美术的时候，那个时候接触素描，去画一个杯子，或者画一个球体，这个时候往往出现，老师画的很逼真，立体感、层次感很强，自己虽说画出来了，在不刻意强调的前提下容易让人们误会（滑稽脸）。
　　经过老师的讲解，我们知道想让我们所画的物体，具有立体感，通常有：高光，暗面，灰面，投影（阴影），这几部分组成。说完了图形中的阴影后，来想想如何在我们的页面中绘画出阴影。这就涉及到我们今天要说的内容CSS3中的box-shadow。
　　探究box-shadow
　　在先说box-shadow之前，大家先来看看几张图片，具体细致的感受一下box-shadow阴影。
技术图片

　　一张很像纸的纸（废话），有点阴影。
技术图片

　　What?这也是阴影？（不要拿border来骗我好吧。。。）
技术图片

　　这个也用box-shadow画出来的？
　　上面的这些图片确实是通过box-shadow画出来的，同学们可能有些小震惊（图一很微妙，图三很炫酷，图二有点开玩笑）。接下来我们来正式探究box-shadow的神奇黑魔法！！！！。
　　box-shadow直译被称为“盒子阴影”，直译的结果与同学们的认知是相符的。CSS中存在盒模型,针对于盒模型的阴影呗。这点大家要记住，是针对于盒子（元素）的阴影，后面我们还会着重说明。
　　box-shadow属性值由6部分组成。
　　语法形式：
　　box-shadow: offset-x offset-y blur spread color position;
　　这里的position可以写在最前面。也可以像上面一样写在最后面。
　　接下来我们来看看这几个属性都提供了什么样的功能？
　　1.offset-x offset-y
　　offset-x用于声明阴影的水平偏移，就是阴影在X轴上的位置。当值为正数，阴影就位于元素右侧，若值为负数，阴影位于元素的左侧。
　　同理
　　offset-y用于声明阴影的垂直偏移，就是阴影在Y轴上的位置。当值为正数，阴影就位于元素下侧，若值为负数，阴影位于元素的上侧。
　　例子：
　　CSS:
　　.demo{
　　width:100px;
　　height:100px;
　　background:#fcc;
　　box-shadow: 10px10px;
　　}
　　结果：
技术图片

　　通过这个我们能看出来是具有阴影的，根据上面的讲解能看出来是（10px10px）向下向右偏移10个px，同理负值是向上向左偏移。接下来我们看blur
　　2.blur
　　blur表示阴影的模糊半径。效果与设计软件中使用的高斯模糊滤镜一样。值为0意味着阴影完全不模糊。blur值越大，边角越不锋利，阴影越朦胧。不允许负值，负值等同于0。在我们上面的例子中修改：
　　CSS:
　　box-shadow: 10px10px10px;
　　结果：
技术图片

　　我们能看到阴影虚化了。
　　这里要注意的是：W3C中没有规定浏览器厂商使用哪种方式实现模糊效果，反正效果与高斯模糊效果差不多就是了。但有一点我们需要注意的，那就是模糊效果会扩大阴影的面积。
技术图片

　　Demo0是blur半径为0的效果，可以看到阴影尺寸与元素尺寸一模一样。而demo1是blur半径为10px的效果，可以看到阴影尺寸有所扩展了，而demo2则扩展得更多一些。
　　现在我们感性上认知到blur半径值大于0时会扩展阴影尺寸，那么到底扩展多少呢？那我们要先明确模糊发生的起始位置了。经过肉眼观察，模糊发生的起始位置就是阴影盒子的各边。事实也就是这样。至于发散距离blurradius(虚化半径)/ 2的距离。看的demo2中阴影尺寸已经与元素盒子重叠了，因为阴影盒子左边框向左发散了15px了，超过它俩之间10px的水平距离了。
　　3.spread
　　spread表示阴影的大小。当值为正数，阴影会向四周扩展。若值为负数，阴影会收缩，小于元素尺寸。默认值0会保持阴影和元素尺寸一致。
　　box-shadow: 0px0px0px10px;
技术图片

　　在这里面我们能看到，当我们spread为10px，margin也为10px他俩是重合的，说明spread为正值，在原来的大小上（上下左右）+spread的值。当spread为为负值，再远的大小上– spread的值
　　4.color
　　color表示阴影的颜色。可以是任何颜色单位。这个没什么说的。
　　5.position
　　position表示阴影的位置，可选项。默认为外部阴影。可以通过使用inset关键字来制作内部阴影。外部阴影不用声明默认就是，想使用内部阴影需要声明inset在最前面最后都可以。
　　Likethis:
　　box-shadow: inset0px0px0px10px#0ff;
　　效果：
技术图片

　　很明显阴影是在里面的。
　　接下来我们也对内阴影分析一下spread以及blurradius 。
　　通过上面的图我们能看出来。
　　对于spread当值为正值时，可以看出内阴影从边界开始填充。至于这个边界是从border开始，还是从padding开始呢？
技术图片

　　CSS：
　　border:10pxsolid#f0f;
　　padding:10px;
　　box-shadow: inset0px0px0px10px#0ff;
　　我们可以看出来
　　以Padding区域为起点进行向内部扩展阴影。扩展半径为spread的值，负值没有意义，没有padding区域以content区域开始。
　　对于blurradius和spread类似这里就不演示了，给大家总结一下，模糊半径的值还是blurradius/2 开始位置同spread，有padding先从padding开始，没有从content开始。
　　下面说一说box-shadow的层次（z-index）
　　对于
　　外阴影（默认情况）：
技术图片

　　对于外阴影：高与magin低于background。
　　对于内阴影：高与padding低于content。
　　Box-shadow不仅可以区分内外阴影还可以，应用多个阴影进行叠加。
　　每个阴影用‘，’隔开，likethis
　　CSS:
　　width:100px;
　　height:100px;
　　background:#fcc;
　　padding:10px;
　　border-radius:50%;
　　box-shadow:120px0px0-10px#f0f,
　　95px10px00px#d00,
　　30px20px0-10px#cdd,
　　90px-10px00px#add,
　　40px-30px00px#edd;
　　结果：
技术图片

　　层次也是后写的在后边。因为可以重叠所以我们可以写多边框的一个元素
技术图片

　　这样的一个准靶。（这个也就是刚开始出现的那张图片的原因）。

详解box-shadow

标签：width 完全 ack http 语法 margin image 魔法叠加

原文地址：https://blog.51cto.com/13409950/2460933

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行