按钮边框半径和光标

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

你试过这个吗？然后使用onclick事件。

http://www.w3schools.com/tags/tag_area.asp

Answer 2

我认为唯一的解决方案是使用内联SVG和标记circle。

我猜浏览器将div渲染为矩形，而不关心边界半径（因为这个角仍然属于矩形）。

Answer 3

你好吗？

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

您可以（如@Greg所指出的）使用<area>标记，也可以使用JavaScript执行以下操作：

• 如果在圆圈外面，请显示常规鼠标图标;如果在里面，显示一个指针
• 如果在圆圈之外，则在onclick方法中返回false;如果在里面，则返回true。

我希望这有帮助，如果您需要JS代码的帮助，请告诉我。

干杯！