使用CSS面膜和夹子式属性砍伐拐角的技巧

本文使用CSS mask和clip-path属性探讨了创意的角落切割技术。我们将在先前使用CSS面罩的工作基础上进行建立，以使用可重复使用的代码和可调节变量来创建各种角色形状。在线CSS发电机被引用可视化结果。

检查了两种主要切割类型：圆形和角度。每个都允许完整形状或仅边框输出，并选择转角选择。

CSS mask属性大量使用。如果不熟悉，建议在继续之前进行快速底漆。

圆形切口

圆形切割采用radial-gradient() 。最初使用四个梯度，一个每个角度。每个梯度覆盖了元素尺寸的四分之一。样品梯度：

 <code>radial-gradient(circle 30px at top left, #0000 98%, red) top left;</code>

这会在左上角创建一个30px半径圆圈，中心透明（＃0000），在其他地方红色。较小的调整（例如98％而不是100％）可防止锯齿状边缘。

优化代码使用自定义属性：

 <code>--g: #0000 98%,#000; --r: 30px; mask: radial-gradient(var(--r) at 0 0 ,var(--g)) 0 0, radial-gradient(var(--r) at 100% 0 ,var(--g)) 100% 0, radial-gradient(var(--r) at 0 100%,var(--g)) 0 100%, radial-gradient(var(--r) at 100% 100%,var(--g)) 100% 100%; mask-size: 51% 51%; mask-repeat: no-repeat;</code>

发电机使用略有不同，更简洁的语法。

梯度较少？

是的！一个梯度就足够了。诀窍涉及一个单一的全尺寸radial-gradient() ，其位置调整了以产生四个切角的幻觉。此方法需要了解元素的尺寸。提出了使用百分比和稍小的梯度大小（99.5％）的解决方法，但具有小数尺寸的局限性。最终的优质单级方法使用负偏移来实现相同的效果而无需舍入问题。

通过去除相关梯度并调整剩余梯度大小来实现角落残疾。

仅圆形边界的切口

创建仅边框形状需要伪元素以避免掩盖内容。不同的配置（一个，两个，三个或四个切割的角）需要不同的组合radial-gradient()和conic-gradient()才能达到所需的边界效应。本文详细介绍了这些组合，强调了使用repeat-y来减少某些情况下所需的梯度数量。

倾斜的切口

倾斜的切割利用conic-gradient() ，每个角落。调整每个梯度的from和at ，以创建倾斜的切割。禁用角落遵循与圆形切割相同的原理。 clip-path提供了替代方案，可以用三个点定义每个角落。提供了计算这些点的公式。 90度角情况可以使用单个梯度进行优化。

纯边界的切口

由于复杂性和与梯度的潜在抗降解问题， clip-path方法相比，优于纯倾角切割的梯度。该文章概述了clip-path方法，详细介绍了内部和外部点的计算。 180度的情况允许代码优化。

结论

该文章展示了CSS mask和clip-path对创建复杂形状的功能和灵活性。尽管提供了详细的说明，但随附的在线生成器简化了代码的生成，使这些技术可满足各种设计需求。

以上是使用CSS面膜和夹子式属性砍伐拐角的技巧的详细内容。更多信息请关注PHP中文网其他相关文章！