Html 如何制作外部不可点击的非标准形状按钮'；边界

我希望能够在网页上使用html和css创建按钮。 按钮应为非标准形状，如一侧为矩形，另一侧为圆形等

第一个问题是如何做到这一点，第二个问题是，如何使它不会被点击，如果点击一点以外的圆形边界。 下面是使按钮循环的CSS代码

.buttons
{
    height: 50px;
    width: 50px;
    border-radius: 50px;
    border: 1px solid #000;
}

---

如果您尝试此代码，并在按钮的圆形区域外单击，则它将单击，但我希望如果未在其边框内单击，则它不会被剪切。

这超出您的控制范围。当将

边界半径

应用于图元时，无论如何，它在长方体模型中仍然是矩形的-您所应用的只是不同的渲染样式，使其看起来更圆。标准也没有指定这对元素的单击区域意味着什么

一些较新的浏览器似乎尊重点击区域的

边界半径

，但这取决于浏览器供应商实施与否，如果不在其中修改一些Javascript来计算用户点击的位置，您对其没有决定性的影响

更新： 我试过了，结果很有趣：

• Firefox最新版本显示一个矩形
• Chrome最新测试版显示一个矩形
• IE10（！！！）“正确”忽略形状外部的单击

---

正如所说的，在标准中它是未定义的行为，所以如果它工作的话，它是一个额外的奖励。

< P>你不能用HTML来控制这样的事情。正如@Niels所说，这取决于供应商

---

但是，我认为您可以在SVG中做到这一点。

作为旁注-在X像素宽/高的元素上，

边界半径不能大于X/2，因为它应用于两端。只有在分别指定所有角点的情况下，才有必要更高。Low
边界半径：25px
也可以在这里完成这项工作，并且更适合做一个圆。@Niels将边界半径设置为
100%
是一个好主意，如果您总是希望圆角填充一个圆edge@Bojangles这不是这里要做的：）这里给出的确切代码，虽然完全有效，有点“缺陷”，比如指定
最大宽度：100px；宽度：120px在一个元素上。如果您使用flash，则可以制作一些非标准形状按钮，只有在其边框内单击时才能按下这些按钮，如果我需要相同的东西而不使用flash，是否有任何框架可以轻松做到这一点，没有计算Javascript上手动点击按钮的位置？我不知道，这只是HTML的一个限制，似乎没有人真正关心。我也不太清楚你为什么这么做，这不是什么大问题，是吗？：）这将是一个问题，如果你有几个按钮与非标准的形状，你想放置一个接一个没有空格之间他们。