我们为投影准备一个大略的HTML元素:

然后添加CSS:

输出结果是三个框,通过调用每个框的ID可以很随意马虎地放置阴影
要添加阴影,让我们将属性box-shadow授予框1:

html表格左右边框阴影技能分享之在HTML元素中添加真切暗影的教程 GraphQL
(图片来自网络侵删)

我们供应三个参数。
前两个参数是offset-x和offset-y。
两者都确定投影的位置。
相对付元素左上角的位置给出偏移量。
偏移x处的正值表示将阴影向右勾引,偏移y处的正值表示将阴影向下勾引。

第三个参数是所需的阴影颜色。
只管这里我们利用elements <div&gt;,但是属性box-shadow可以运用于所有其他HTML元素。

授予模糊半径

如果想要阴影看起来更逼真,则可以利用blur-radius参数。
此参数将设置我们如何给予阴影模糊效果。
让我们将其运用于方框2:

把稳第三个参数,该值4px调度运用于投影的模糊半径。

供应半径差数

如果要调度阴影的大小,我们可以添加参数spread-radius以使阴影扩大或缩小。
让我们8px在框2中添加一个半径扩展:

把稳参数的顺序。

合并多个阴影

我们乃至可以一次将多个阴影组合到一个元素中。
让框3运用蓝色和绿色投影:

制作阴影

我们可以用参数制作一个向内的阴影inset。
参数inset可以写在属性的开头或结尾box-shadow。
以下示例利用elements blockquote。

我们还可以添加一些模糊和散布以增强阴影:

利用properties box-shadow,我们可以为所创建的网页供应阴影,从而可以供应良好的3D照明效果。