网页可视对象的CSS阴影（一）
本帖最后由 马黑黑 于 2021-12-21 09:54 编辑之前，我们介绍过基于文本外观的修饰特效即 CSS文本阴影。文本是网页中的可视对象之一，其阴影的实现有专属的 CSS 属性命令，text-shadow。那么，其他网页可视对象又是如何实现阴影效果呢？
在 CSS3 的世界里，box（盒子）概念针对非文本的可视元素，图片（img）、区域（div）、段落（p）、表格（table）、音频与视频播放的界面，等等等等，都被视为一个个的 box，因而都可以拥有自己的修饰手段，其中，阴影自然不可或缺。
在文本阴影中，CSS 命令用到了 shadow，shadow 就是“影子”，text-shadow 就是文本的影子（阴影）了。那么，作为都是 box 的其他可视对象，box 的影子（阴影）命令自然就是 box-shadow 了。
语法：style="box-shadow:值1 值2 值3 值4;"
【说明】
值1：水平方向的阴影值，如10个像素可表达为 10px
值2：垂直方向的阴影值
值3：模糊值，用 10px 这样的方式表达
值4：阴影颜色，合法的颜色表达即可
【例子】
<div style="margin:0px auto; width:50%; height:200px; box-shadow:4px 4px 6px #000;">内容</div>
效果与div标签的其他样式解释请看下楼——
本帖最后由 马黑黑 于 2021-12-21 09:54 编辑 <br /><br /><div style="margin:0px auto; width:50%; height:200px; box-shadow:4px 4px 6px #000;">
<pre>
阴影效果的核心代码：box-shadow:4px 4px 6px #000
其他代码说明：
margin:0px auto - auto是居中作用
width:50% - 此 div 宽度设为父容器的一半
height:200px - 此 div 的高度
</pre>
</div> 马黑黑 发表于 2021-12-21 09:43
本帖最后由 马黑黑 于 2021-12-21 09:54 编辑
如果不设置height，是不是就直接按照文字占位自动出现高度？
试验：
<div style="margin:0px auto; width:50%; box-shadow:4px 4px 6px #000;">
<pre>
阴影效果的核心代码：box-shadow:4px 4px 6px #000
其他代码说明：
margin:0px auto - auto是居中作用
width:50% - 此 div 宽度设为父容器的一半
height:不要这个，多复制一个试试
</pre>
<pre>
阴影效果的核心代码：box-shadow:4px 4px 6px #000
其他代码说明：
margin:0px auto - auto是居中作用
width:50% - 此 div 宽度设为父容器的一半
height:不要这个，多复制一个试试
</pre>
</div> 红影 发表于 2021-12-21 10:25
如果不设置height，是不是就直接按照文字占位自动出现高度？
是的。空白 div 如果不设置高度效果不好，演示需要设置了高度值。 margin外边距取值0，所以设置相对父容器的宽度的吧。
用pre 所以不用设置padding了吧，这样也省力呢。
这些命令的组合运用真有趣啊，这两个帖子太好了{:4_199:} 红影 发表于 2021-12-21 10:33
margin外边距取值0，所以设置相对父容器的宽度的吧。
用pre 所以不用设置padding了吧，这样也省力呢。
对，pre照实渲染了文本，文本自身样式好就不用设置 margin（外边距） 和 padding（内边距）了 马黑黑 发表于 2021-12-21 10:30
是的。空白 div 如果不设置高度效果不好，演示需要设置了高度值。
能不能让图片和视频混排？比如我图片上扣一个透明洞，让视频在这个洞的后面播放{:4_173:} 红影 发表于 2021-12-21 10:33
margin外边距取值0，所以设置相对父容器的宽度的吧。
用pre 所以不用设置padding了吧，这样也省力呢。
margin 的值可以随意 红影 发表于 2021-12-21 10:36
能不能让图片和视频混排？比如我图片上扣一个透明洞，让视频在这个洞的后面播放
混排难度很大，因为你这是堆叠。图片和播放器堆叠在一起，可以考虑用图片做背景图，然后播放器放在上面，调整好大小和位置 马黑黑 发表于 2021-12-21 10:36
对，pre照实渲染了文本，文本自身样式好就不用设置 margin（外边距） 和 padding（内边距）了
这个帖子和上一个帖子是两种不同的运用方法，对照着看真好{:4_199:} 红影 发表于 2021-12-21 10:41
这个帖子和上一个帖子是两种不同的运用方法，对照着看真好
很多东西可以配套使用，这和穿衣打扮是一个道理的
马黑黑 发表于 2021-12-21 10:37
margin 的值可以随意
若有取值， width:50%在显示的时候，就不是完全的50%的感觉了吧。 红影 发表于 2021-12-21 10:43
若有取值， width:50%在显示的时候，就不是完全的50%的感觉了吧。
这么说吧：margin 和 padding 以及 border，它们的值都会算入所属对象的宽度值。50%的宽度还是有的，但前述那些值会在计算之列。 马黑黑 发表于 2021-12-21 10:41
混排难度很大，因为你这是堆叠。图片和播放器堆叠在一起，可以考虑用图片做背景图，然后播放器放在上面， ...
永图片做背景图，把播放器放上面，这个能做到。现在想把视频藏图片后面，只通过露的洞演示。
这个也算是替清舟问的，她的那个帖子也想把视频扔在图片后面去{:4_189:} 马黑黑 发表于 2021-12-21 10:42
很多东西可以配套使用，这和穿衣打扮是一个道理的
搭配得当，则效果出彩{:4_173:} 马黑黑 发表于 2021-12-21 10:45
这么说吧：margin 和 padding 以及 border，它们的值都会算入所属对象的宽度值。50%的宽度还是有的，但前 ...
是留完宽度然后让那些边距起作用，还是把边距都计算入50%里，这两个还是有点区别的。 红影 发表于 2021-12-21 14:41
是留完宽度然后让那些边距起作用，还是把边距都计算入50%里，这两个还是有点区别的。
当然有区别，但总体50%是不变的。
作为子元素，其总宽度要比父容器小到一定程度，阴影才能显示出来 红影 发表于 2021-12-21 14:38
永图片做背景图，把播放器放上面，这个能做到。现在想把视频藏图片后面，只通过露的洞演示。
这个也算是 ...
那可以考虑定位：两个元素通过定位一前一后重叠在一起 马黑黑 发表于 2021-12-21 17:17
当然有区别，但总体50%是不变的。
作为子元素，其总宽度要比父容器小到一定程度，阴影才能显示出来
嗯嗯，知道了，需要留出足够的空间。