在
网站开发过程中使用CSS创建形状是一个经典的创新,许多情况下,我们试图使用使用这个方式,但CSS已经发展了,我们有现代方法用干净、可重用的代码创建CSS形状。
在使用CSS创建形状之前很多技术会选择参考已有代码,问题是你不理解复制的代码是如何工作的。当然,它完成了工作,但是许多最广泛使用的CSS形状片段通常都是过时的,并且依赖于诸如幻数之类的东西来获得正确的形状。因此,下次您需要对代码进行更改时,它要么没有什么意义,要么不够灵活,以至于您需要一个全新的解决方案。
这是你的如何在CSS中创建形状的一站式现代指南!我们将探索最常见的CSS形状,同时强调不同的CSS技巧和技术,您可以轻松地将其用于任何类型的形状。我们的目标不是学习如何创建特定的形状,而是了解允许您创建任何想要的形状的现代技巧。
很多技术会问为什么不使用SVG,我经常被问到这个问题,我的回答总是一样的:如果您需要,请使用SVG 可以!我对SVG没有任何意见。这只是使用另一种语法创建形状的另一种方法,需要考虑另一组因素。很多时候,对于装饰性的东西,或者当您处理包含要进行样式化的真实内容的标记中的特定元素时,CSS将是您的最佳选择。不过,最终您将需要考虑项目的需求,并决定CSS形状是否真的是您所寻找的。
我希望在阅读了这份全面的指南后,你会对CSS的形状有不同的看法。我们介绍了一些形状,但实际上,有成百上千种形状,因为您可以看到它们在配置成各种变体时是多么灵活。所有的形状都使用不同CSS概念的某种组合,如剪辑、蒙版、合成、渐变、CSS变量等。更不用说一些隐藏的技巧了。