按钮边框半径和光标 [英] Button border radius and cursor

问题描述

CSS边框半径影响按钮渲染（我看到它的圆形），但不影响它如何与用户交互（我仍然可以单击按钮外边框）。我应该如何解决它？

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

  button 
 {
 cursor：pointer; 
 outline：none; 
 background-size：100％100％; 
 background-color：red; / * transparent; * / / *它实际上是红色和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'）; 
} 
  

注意，

解决方案

你好吗？

这不是破碎，因为它是它的工作方式，所以你不能真正解决它，所有元素在浏览器中呈现为矩形（如果检查圆形按钮，您将看到它覆盖了一个矩形区域）

您可以（作为@Greg指向out）使用< area> 标记，或者您可以使用JavaScript执行以下操作：

• 如果在圆形坐标外，显示常规鼠标图标;如果在里面，则显示指针


• 如果在圆圈之外，则在onclick方法中返回false;如果在里面，返回true。

我希望这有帮助，让我知道如果你需要帮助JS代码。

干杯！

CSS border radius does affect button rendering (I see it's round form), but does not affect how it interacts with the user (I still can click button outside its border). How should I fix it?

I see the behavior in 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');
}

Regards,

解决方案

how are you?

It's not actually "broken", since it's the way it's supposed to work, so you can't really fix it, all elements render as rectangles in the browser (if you inspect the round button, you'll see it covers a rectangular area)

You can either (as @Greg pointed out) use the <area> tag, or you can use JavaScript to do the following:

• If outside the circle coords, show a regular mouse icon; If inside, show a pointer
• If outside the circle coords, return false in the onclick method; If inside, return true.

I hope this helps, let me know if you need help with the JS code.

Cheers!

这篇关于按钮边框半径和光标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！