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

问题描述

CSS边界半径会影响按钮呈现​​（我看到它的圆形式），但并不影响它如何与用户交互（我仍然可以点击其境外按钮）。我应该如何解决？

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?

我在Chrome中看到的行为。

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

问候，

推荐答案

你怎么样？

这实际上不是破，因为这是它应该工作的方式，所以你不能真正解决这个问题，所有的元素呈现在浏览器中的矩形（如果你检查的圆形按钮，你会看到它涵盖了一个矩形区域）

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)

您可以（为@格雷格指出）使用＆LT;区域＆GT; 标签，或者您可以使用JavaScript来做到以下几点：

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

• 如果圈子外面COORDS，显示一个普通的鼠标图标;如果里面，显示的指针


• 如果圈子外COORDS，在onclick方法返回false;如果里面，返回true。

我希望这可以帮助，让我知道，如果你需要用JS code帮助。

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

干杯！

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