使用CSS涂料API模拟下降阴影

大多数前端开发人员都熟悉box-shadow CSS属性。虽然有效，但阴影带来了CSS框模型中的挑战：它们不会影响元素维度，并且很容易被父级溢出设置夹住。存在解决方法，但是新兴的CSS Houdini规格提供了令人兴奋的替代方案。尤其是CSS绘制API，可以在运行时启用编程图像生成。让我们探索使用它来创建在边框图像中集成的复杂阴影。

瞥见Houdini

Houdini提供了对浏览器绘画过程的增强访问权限。这是一套低级API的套件，揭示了CSS发动机的一部分，通过与浏览器的渲染引擎的造型和布局进行交互，使开发人员有能力扩展CSS。

CSS油漆API

CSS Paint API是W3C候选建议，是Houdini获得浏览器牵引力的第一个API之一。当前，Chrome和Edge提供了全部支持，而Safari则需要一个标志，Firefox认为它适合原型制作。对于不支持的浏览器（不包括IE11），存在一个多填充。请注意，尽管在Chromium中启用时，将参数传递给paint()函数可能仍需要实验Web平台功能启用。

我们的方法：阴影整合

我们将生成阴影图像并将其应用于border-image 。与填充或边缘不同，阴影不会固有地增加元素尺寸。我们的方法将阴影直接嵌入到元素的边界中，从而提供了一些好处：

1. border-width有助于该元素的整体维度。
2. 内容避免重叠阴影。
3. 填充不需要额外的宽度。
4. 利润不会干扰同级元素。

border-image属性使用图像切片来弯道和侧面。 CSS涂料API将生成此图像，分层多个阴影。

该过程涉及：

1. 为目标元素设置HTML和CSS。
2. 创建一个模块来绘制图像。
3. 将模块装入油漆工作点。
4. 使用paint()函数在CSS中调用Worklet。

准备画布

CSS油漆API的功能与HTML类似<canvas></canvas>元素。我们将创建一个300x300 div作为我们的画布：

<div class="foo"></div>

并样式IT：

 .foo {
  边界：15px固体#efefef;
  盒子大小：边框框；
  身高：300px;
  宽度：300px;
}

构建油漆类

HTTPS对于JavaScript工作人员（包括油漆工作点）是必不可少的。

接下来，创建模块（带有registerPaint()的简单文件）。此功能为工作点的名称和包含绘画逻辑的类：

登记处（
  “阴影”，
  班级 {
    静态GET InputProperties（）{
      返回[“  - 阴影色”，“背景色”，“边界宽度”];
    }
    静态获取inputarguments（）{
      返回 [”<integer> “，”<integer> “，”<integer> ”];
    }
    油漆（上下文，大小，道具，args）{
      //在这里绘画逻辑...
    }
  }
）；</integer></integer></integer>

inputProperties指定要访问的CSS属性（自定义和标准）。 inputArguments （当前在某些浏览器中的标志后面）允许将参数直接传递到paint()函数。 paint()方法使用提供的上下文，大小，属性和参数来绘制。

实施paint()方法

内部paint() ，我们将调整边界宽度的尺寸：

 const width = geom.width -borderwidth * 2;
const高度= Geom.Height -BorderWidth * 2;

我们将访问属性和参数：

 const borderwidth = props.get（“边界宽度”）。值；
const shadowcolors = props.getall（“  - 阴影色”）;
ctx.fillstyle = props.get（“ background-color”）。toString（）;

const blurarray = args [2] .toString（）。split（ /\ s /）;
const xarray = args [0] .toString（）。split（ /\ s /）;
const yarray = args [1] .toString（）。split（ /\ s /）;

然后，我们将绘制阴影：

 shadowcolors.foreach（（Shadowcolor，index）=> {
  ctx.shadowoffsetx = xarray [index];
  ctx.shadowoffsety = yarray [index];
  ctx.shadowblur = blurarray [index];
  ctx.shadowcolor = shadowcolor.tostring（）;
  ctx.fillect（borderwidth，borderwidth，宽度，高度）;
}）;

这通过阴影颜色迭代，设置阴影属性并绘制一个填充的矩形。也可以使用替代方法，例如使用帆布阴影过滤器。

注册和申请

注册油漆模块：

 css.paintworklet.addmodule（“ path/to/to/your/your/module.js”）;

注册自定义属性（可选但建议）：

 CSS.RegisterProperty（{
  名称：“  - 阴影色”，
  语法：”<color> ”，
  初始价值：“黑色”，
  继承：false
}）;</color>

最后，将油漆功能应用于您的CSS：

 .foo {
  边界形象源：油漆（阴影，0 0 0，8 2 1，8 5 3）15;
  边界形象 - 单板：15;
}

请记住使用设备像素比使用devicePixelRatio和calc()正确缩放。后备（填充，边缘，梯度，伪元素）对于更广泛的浏览器兼容性至关重要。

结论

CSS Paint API提供了一种创建自定义效果的强大方法，但是考虑浏览器支持并提供适当的后备很重要。虽然比简单的解决方案更复杂，但它提供了对视觉元素的精确控制，从而为阴影效果带来了创造性的可能性。

以上是使用CSS涂料API模拟下降阴影的详细内容。更多信息请关注PHP中文网其他相关文章！