html - 如何制作非标准形状的按钮，在其边框外不可点击

Question

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

第一个问题是如何做到这一点，第二个问题是如何让它在圆形边框之外点击时无法点击。这是使按钮成为圆形的 CSS 代码，

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

如果您尝试此代码，并在按钮的圆形区域外单击，那么它会单击，但我希望它在没有在其边框内单击时不可点击。

Answer 1

这是你无法控制的。当将 border-radius 应用于元素时，无论如何它在盒子模型中仍然是矩形 - 您所应用的只是一种不同的渲染样式，这使得它看起来是圆形的。标准也没有具体说明这对元素的点击区域意味着什么。

一些较新的浏览器似乎尊重点击区域的 border-radius，但是否实现它取决于浏览器供应商，您没有决定性影响无需修改其中的一些 Javascript 来计算用户点击的位置。

更新:

我用 this Fiddle 试过了，结果很有趣:

• Firefox 最新稳定看到一个矩形
• Chrome 最新测试版看到一个矩形
• IE10 (!!!)“正确地”忽略形状外的点击

如前所述，这是标准中未定义的行为，因此如果它有效，请将其视为奖励。