网页可视对象的CSS阴影（一）

马黑黑

之前，我们介绍过基于文本外观的修饰特效即 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标签的其他样式解释请看下楼——

马黑黑

    阴影效果的核心代码：box-shadow:4px 4px 6px #000
    其他代码说明：

        margin:0px auto - auto是居中作用
        width:50% - 此 div 宽度设为父容器的一半
        height:200px - 此 div 的高度

红影

马黑黑 发表于 2021-12-21 09:43
本帖最后由 马黑黑 于 2021-12-21 09:54 编辑

如果不设置height，是不是就直接按照文字占位自动出现高度？

红影

试验：

    阴影效果的核心代码：box-shadow:4px 4px 6px #000
    其他代码说明：

        margin:0px auto - auto是居中作用
        width:50% - 此 div 宽度设为父容器的一半
        height:不要这个，多复制一个试试

    阴影效果的核心代码：box-shadow:4px 4px 6px #000
    其他代码说明：

        margin:0px auto - auto是居中作用
        width:50% - 此 div 宽度设为父容器的一半
        height:不要这个，多复制一个试试

马黑黑

红影 发表于 2021-12-21 10:25
如果不设置height，是不是就直接按照文字占位自动出现高度？

是的。空白 div 如果不设置高度效果不好，演示需要设置了高度值。

红影

margin外边距取值0，所以设置相对父容器的宽度的吧。
用pre 所以不用设置padding了吧，这样也省力呢。

这些命令的组合运用真有趣啊，这两个帖子太好了

马黑黑

红影 发表于 2021-12-21 10:33
margin外边距取值0，所以设置相对父容器的宽度的吧。
用pre 所以不用设置padding了吧，这样也省力呢。

对，pre照实渲染了文本，文本自身样式好就不用设置 margin（外边距） 和 padding（内边距）了

红影

马黑黑 发表于 2021-12-21 10:30
是的。空白 div 如果不设置高度效果不好，演示需要设置了高度值。

能不能让图片和视频混排？比如我图片上扣一个透明洞，让视频在这个洞的后面播放

马黑黑

红影 发表于 2021-12-21 10:33
margin外边距取值0，所以设置相对父容器的宽度的吧。
用pre 所以不用设置padding了吧，这样也省力呢。

margin 的值可以随意

马黑黑

红影 发表于 2021-12-21 10:36
能不能让图片和视频混排？比如我图片上扣一个透明洞，让视频在这个洞的后面播放

混排难度很大，因为你这是堆叠。图片和播放器堆叠在一起，可以考虑用图片做背景图，然后播放器放在上面，调整好大小和位置

红影

马黑黑 发表于 2021-12-21 10:36
对，pre照实渲染了文本，文本自身样式好就不用设置 margin（外边距） 和 padding（内边距）了

这个帖子和上一个帖子是两种不同的运用方法，对照着看真好

马黑黑

红影 发表于 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
混排难度很大，因为你这是堆叠。图片和播放器堆叠在一起，可以考虑用图片做背景图，然后播放器放在上面， ...

永图片做背景图，把播放器放上面，这个能做到。现在想把视频藏图片后面，只通过露的洞演示。
这个也算是替清舟问的，她的那个帖子也想把视频扔在图片后面去

红影

马黑黑 发表于 2021-12-21 10:42
很多东西可以配套使用，这和穿衣打扮是一个道理的

搭配得当，则效果出彩

红影

马黑黑 发表于 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%是不变的。
作为子元素，其总宽度要比父容器小到一定程度，阴影才能显示出来

嗯嗯，知道了，需要留出足够的空间。