HTML5 给图形绘制阴影

HTML5 中，我们除了上一节讲过的可以对图形设置平移、旋转、缩放，还可以给图形添加阴影效果。添加阴影的时候只需要利用图形上下文对象的几个关于阴影绘制的属性就可以实现啦。

图形阴影绘制的属性

shadowOffsetX 属性和 shadowOffsetY 属性分别用于设置阴影在 X 轴和 Y 轴的延伸距离，属性值为正值表示向下或向右延伸，负值表示向上或向左延伸。

shadowBlur 属性用于设置阴影的模糊度，当我们不希望图形的阴影太清晰时，可以使用这个属性。属性值为必须为正值，否则无效哟，一般设定在 0到10 之间。

shadowColor 属性值用于设置阴影的颜色，属性值可以为任意标准的 CSS 颜色值，默认颜色为黑色。

给图形绘制阴影

例如给一个粉色的矩形绘制阴影。

示例：

绘制向右偏移 10 像素的阴影：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>HTML5学习(9xkd.com)</title>
        </head>
        <body>
            <canvas id="mycanvas" width="300" height="200" style="border: 1px solid #000;"></canvas>
            <script>
                var can = document.getElementById("mycanvas");
                var ctx = can.getContext("2d");
                ctx.shadowOffsetX = 10;
                ctx.shadowBlur = 10;
                ctx.shadowColor="#000";
                ctx.fillStyle = "pink";  // 填充颜色
                ctx.fillRect(50, 50, 150, 70);
            </script>
        </body>
    </html>

在浏览器中的演示效果：

可以看到上图中，阴影的位置向右偏移，如果想要阴影向左偏移，可以将shadowOffsetX 的值设置为负数。

示例：

如果要绘制向上偏移 20 像素的阴影，则不需要设置 shadowOffsetX，而是设置 shadowOffsetY 属性，正值为向下偏移，负值为向上偏移：

var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
ctx.shadowOffsetY = -20;
ctx.shadowBlur = 10;
ctx.shadowColor="rgba(0, 0, 0, 0.7)"; // 设置透明度
ctx.fillStyle = "pink";  // 填充颜色
ctx.fillRect(50, 50, 150, 70);

在浏览器中的演示效果：

可以看到这张截图中，矩形的阴影颜色要比上面示例中淡一点。这是因为我们在给阴影设置颜色时，指定了一个透明度，用到了 rgba() 函数，函数中第四个参数用于设置透明度，值为 0~1 之间的小数，0表示完全透明，1表示不透明。

示例：

给四个边设置阴影：

var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
ctx.shadowBlur = 10;
ctx.shadowColor="rgba(0, 0, 0, 0.7)"; // 设置透明度
ctx.fillStyle = "pink";   // 填充颜色
ctx.fillRect(50, 50, 150, 70);

在浏览器中的演示效果：

在实际应用中，其实我们会经常用到阴影，例如给导航栏添加阴影、给按钮添加阴影、给图片添加阴影等，这样看上去就会更立体一些，增加层次感。

了解更多可查看链接：https://www.9xkd.com/

览图

首先查看预览图:

多彩方块

原理

采用了 background 属性 background: inherit;

inherit 关键字使得元素获取其父元素的计算值。它可以应用于任何 CSS 属性，包括 CSS 简写 all。对于继承属性，inherit 关键字只是增强了属性的默认行为，通常只在覆盖原有的值的时候使用。继承始终来自文档树中的父元素，即使父元素不是包含块。

线性渐变 linear-gradient

线性渐变由一个轴 (梯度线) 定义，其上的每个点具有两种或多种的颜色，且轴上的每个点都具有独立的颜色。为了构建出平滑的渐变，linear-gradient() 函数构建一系列垂直于渐变线的着色线，每一条着色线的颜色则取决于与之垂直相交的渐变线上的色点。

用法：

// 渐变轴从左上角出发并且呈 45 度。
background: linear-gradient(45deg, red, blue);

伪元素 ::after

CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

.content-item::after {
            content: "";
            width: 280px;
            height: 280px;
            /* 获取其父元素的计算值 */
            background: inherit;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            filter: blur(20px) brightness(80%);
            z-index: -1;
}

滤镜 filter

在该程序中调用了2个函数： blur(20px) brightness(80%);

blur()：将高斯模糊应用于输入图像。

brightness()：将线性乘法器应用于输入图像，以调整其亮度。值为 0% 将创建全黑图像；值为 100% 会使输入保持不变，其他值是该效果的线性乘数。如果值大于 100% 将使图像更加明亮。

至于代码中还有其他知识点，也就是 margin 、position 等基础内容了。

全部代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阴影和背景一致</title>
    <style>
        .content-item {
            position: relative;
            width: 260px;
            height: 260px;
            border-radius: 10px;
            /* background: linear-gradient(90deg, #e66465, #9198e5); */
            background: linear-gradient(217deg, rgba(255, 0, 0, .8), rgba(255, 0, 0, 0) 70.71%),
                linear-gradient(127deg, rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 70.71%),
                linear-gradient(336deg, rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%);
            margin: 100px auto;
        }

        .content-item::after {
            content: "";
            width: 280px;
            height: 280px;
            /* 获取其父元素的计算值 */
            background: inherit;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            filter: blur(20px) brightness(80%);
            z-index: -1;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="content-item"></div>
    </div>
</body>

</html>

参考文章

css 设置盒子阴影，阴影和背景图保持一致_css filter 阴影色和背景色一致_随忆~的博客-CSDN博客

欢迎收藏该文章！

言

通常，我们为div盒子或者图片设置阴影使用 box-shadow 属性，代码如下：

box-shadow: 10px 10px 10px gray;

问题抛出

使用 box-shadow 属性给div盒子设置阴影倒还好，如果用在透明的图片上，阴影会变成方形的，让其看起来像添加了一个边框一样。

解决方法

我们可以通过css的另一种参数，为透明png实现基于透明图片的阴影效果，效果如下图，左侧是 box-shadow ，右侧 drop-shadow 。

drop-shadow()说明：

drop-shadow() 是CSS中用于为图像或文本添加阴影效果的一个函数，‌它属于 filter 属性的一部分。‌这个函数允许你为元素创建阴影，‌而不需要考虑元素的形状或边界框。‌与 box-shadow 不同，‌drop-shadow 可以应用于非矩形形状，‌如透明的PNG或SVG图像，‌它使用元素的Alpha蒙版来决定阴影的形状。‌这意味着，‌即使元素没有背景，drop-shadow 也能为图像的非透明部分创建阴影。‌

drop-shadow()语法如下：

filter: drop-shadow( offset-x offset-y blur-radius spread-radius color )

drop-shadow()参数说明如下：

offset-x：该参数设置图像的水平偏移量。正值创建右侧偏移，负值创建左侧偏移。
offset-y：此参数设置图像的垂直偏移量。正值创建到底部的偏移量，负值创建到顶部的偏移量。
blur-radius：设置模糊半径的值。它是一个可选参数。
spread-radius：设置传播半径的值。它是一个可选参数。
color：设置投影的颜色。它的可选参数。

演示代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .img_box .left_img{
      box-shadow: 10px 10px 10px gray;
    }
    .img_box .right_img{
      filter: drop-shadow(2px 4px 8px rgb(225, 170, 170));
    }
  </style>
</head>
<body>

  <div class="img_box">
    <img class="left_img" src="./lihua.png" />
    <img class="right_img" src="./lihua.png" />
  </div>
  
</body>
</html>

总结

尽管有很好的支持，但 drop-shadow 滤镜仍然没有得到充分的利用。我希望这篇文章强调了一些使用 box-shadow的情况，也许你可以在你的下一个项目中使用它！

在线咨询

上一篇：HTML5(七)-SVG基础入门
下一篇：多行文本控件(富文本框)怎样自动填写？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML5 给图形绘制阴影

图形阴影绘制的属性

给图形绘制阴影

览图

原理

全部代码

参考文章

言

问题抛出

解决方法

演示代码如下：

总结

您的项目需求