按钮边框半径和光标答案

【问题标题】：Button border radius and cursor按钮边框半径和光标
【发布时间】：2012-03-18 17:52:48
【问题描述】：

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');
}

问候，

【问题讨论】：

我试图避免指针光标位于角落。将附上截图。

标签： css html button webkit

【解决方案1】：

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

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

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

【讨论】：

好的，但是一个好的解决方法呢？我不喜欢和 mousemove 事件处理。
我能想到的唯一不涉及这些解决方案的解决方法是创建足够的元素来覆盖所需的“不可点击”区域（对应于圆圈中未包含的区域），但在我看来，这比添加标记或使用 JavaScript 更糟糕。如果你想避免 JS，是要走的路，正如@Greg 建议的那样。
顺便说一下，下面为@Grzegorz Łuszczek 提出的SVG 解决方案也是有效的，但是旧的浏览器可能不支持它（做一个快速测试，最新的IE、FF 和Chrome 确实支持它，但是IE8及以下，不）
谢谢。再三考虑后，我决定完全保持行为不变，说它是面向手指的界面（实际上并非完全不真实）。
我意识到这是旧的，但对于那些绊倒的人来说：这是一个 WebKit (safari/chrome) 错误...规范说：“曲线外的区域边界边缘不接受代表元素的指针事件”（w3.org/TR/css3-background/#corner-clipping）。意思是这是“BROKEN”如果你想提出问题，我可以找到相关的错误文件；铬：code.google.com/p/chromium/issues/detail?id=100004 SAFARI/WEBKIT：bugs.webkit.org/show_bug.cgi?id=95373

【解决方案2】：

您是否尝试过这个。然后使用 onclick 事件。

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

【讨论】：

【解决方案3】：

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

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

【讨论】：