我一直想知道为什么 HTML 中没有特殊的形状标签或 CSS 中没有样式来制作形状,如三角形、圆形或多边形等。我不明白为什么没有实现这种性质的东西。难道他们没有想到吗?我真的怀疑,或者他们故意拒绝提供它?
7 回答
这主要是因为盒子模型概念要求块级元素是矩形的。这样做的原因是允许关于这些元素如何相互反应的可预测行为,例如,当它们堆叠在一起或漂浮在彼此旁边时。
(旁注:这非常适合早期的互联网,因为网站是基于垂直的,并且几乎没有视觉定义的容器 - 它是一个接一个的文本块,可能被图片打破。水平堆叠东西并没有真正到来直到后来。)
正如评论中@Cristy 的链接所示,有一些技巧可以创建更复杂的形状。例如,圆形和椭圆形可以通过创造性地使用border-radius
. 其他形状依赖于通过transform
属性的变形。
然而,重要的是要记住,浏览器仍然会认为此类模拟形状具有边界框。这是管理一个元素与另一个元素的接近程度以及它们的边缘如何相遇的基础原则。
HTML 和 CSS 都不是绘图程序。虽然可以创建这样的对象,但它们至少在某种程度上是复杂的黑客攻击。
html5
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
可用于绘制形状。
如前所述,HTML 和 CSS 不包含任何重要的形状功能。不使用像 Javascript 和 Canvas 这样的脚本最接近的东西是 SVG,它实际上只是用 XML 编写的矢量图形。
有关 SVG 的更多信息:
这是因为 HTML 仅旨在为您的文本提供语义含义。虽然浏览器确实为大多数元素提供了一些默认样式,但这只是一个建议,默认样式可能因浏览器而异。因此,就 HTML 而言,如果他们试图实现一个<triangle>
标签,那将绝对违背所有最佳实践。他们确实有在 WEB 开头定义样式的标签(等等)。但事实证明,维持它是一场噩梦。因此,WEB 的样式元素被委托给 CSS。
现在就 CSS 而言,它从一开始就已经走了很长一段路。因此,虽然没有简单的方法可以做到这一点,但你提到的大多数东西都可以用 CSS 来实现。像圆圈这样的东西实际上很容易。当涉及到三角形时,它有点困难。但是现在,只要一点 CSS 和 JavaScript 的魔力,任何事情都可以完成。有很多专门用于绘图/动画的 Javascript 库。
HTML 5 和 CSS3 可以实现这一点,要查看可以创建的所有可能的形状,已在http://www.land-of-web.com/freebies/css3-simple-shapes-cheat-sheet制作了一份备忘单.html
编辑:Utkanos 是对的,您可以使用我创建的链接创建形状,但请记住 div 容器将作为块输出。
那不是 HTML 的目的,它是用来标记文档的。他们发明了诸如 SVG 之类的东西来做到这一点,并发明了诸如 XHTML 之类的可扩展标记语言,您可以将它们以模块化的方式直接插入。