css - 按钮边框半径和光标

Question

CSS 边框半径确实会影响按钮渲染(我看到它是圆形的)，但不会影响它与用户的交互方式(我仍然可以在边框外单击按钮)。我该如何解决？

我在 Chrome 中看到了这种行为。

button
{
    cursor: pointer;
    outline: none;
    background-size: 100% 100%;
    background-color: red; /*transparent;*/ /* It's actually red and ROUND. */
    background-position: center center;
    background-repeat: no-repeat;
    border: 0px;

    -webkit-border-top-left-radius: 73px;
    -webkit-border-top-right-radius: 73px;
    -webkit-border-bottom-left-radius: 73px;
    -webkit-border-bottom-right-radius: 73px;
    width: 146px; height: 146px;

    background-image: url('leftarrow.png');
}

问候，

Answer 1

它实际上并没有“损坏”，因为这是它应该工作的方式，所以你无法真正修复它，所有元素在浏览器中呈现为矩形(如果你检查圆形按钮，你会看到它覆盖一个矩形区域)

您可以(正如@Greg 指出的那样)使用 <area>标记，或者您可以使用 JavaScript 执行以下操作:

• 如果在圆圈坐标之外，显示一个普通的鼠标图标；如果在里面，显示指针
• 如果在圆坐标外，onclick方法返回false；如果在内部，则返回 true。