1

我还没有看到任何关于它们的文档，所以它们可能不存在，但检查一下总是好的。

我正在寻找一个真正的圆形（或矩形以外的任何类型的多边形）元素。我可以在画布上画一个圆圈，但画布仍然是一个矩形。我可以使用边框半径画一个圆，但它仍然是一个带有漂亮圆角的方形元素。

我正在寻找一种（简单的）方法来制作在可点击区域上非常精确的复杂形状按钮。

我目前的方法是使用 JavaScript，听点击和测量位置。如果这在 html5/css3 中处理会更理想。

4

3 回答 3

2

好吧，所有元素都以一种或另一种形状的块、正方形或矩形开始。除此之外，您还可以通过 CSS 操作该块，使其显示为一个圆圈。但不言而喻，并非所有浏览器都完全支持这一点，但本质上你必须担心的主要是较旧的浏览器。

如果您正在寻找 100% 兼容新旧的东西，那么您可以在http://pixlr.com那里画一个并使用图像标签。但即便如此，图像仍然是方形/矩形。无论你走哪条路，都无法逃避这个概念。

总而言之..

<div class="full-circle"></div>

.full-circle {
 background-color: #c06;
 border: 3px solid #333;
 height: 150px;
 border-radius:75px;
 -moz-border-radius:75px;
 -webkit-border-radius: 75px;
 width: 150px;
}

就您当前的方法而言，这是大多数情况下唯一合理的逻辑，在“规范”之外做事通常需要更多的工作，然后是一行或三行代码来为您完成。

于 2012-10-26T17:05:32.097 回答
2

Border-radius 只是使元素看起来是圆形的（据报道，在 Firefox 中除外）。

地图是一种工作，但我想避免强制使用图像。

SVG 可以工作，但它仍然不是纯 html/css，因为链接需要 javascript 才能工作。SVG 元素仍然是方形的，尽管里面的形状是对 javascript 事件响应良好的元素。所以它不是 100% 完美的，但它是可行的。

如果我们能够控制页面上元素的形状而不是在画布内绘图，那肯定会更酷。也许我会尝试在画布内构建整个网站......

感谢您的建议！

于 2012-10-29T16:27:13.700 回答
1

没有真正的圆形元素，但请尝试使用常规框元素并使用 CSS3 规范border-radius。例如：

border-radius: 50px;
height: 50px;
width: 50px;
overflow: hidden;

这将创建一个实际上是圆形的元素，并且当将鼠标悬停在元素上时，Firebug 会尊重弯曲的形式。

于 2012-10-26T17:09:08.040 回答