Радиус границы и курсора кнопки

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

Я думаю, что единственным решением является использование встроенного SVG и тега circle.

Я предполагаю, что браузер отображает div как прямоугольник, и не заботится о радиусе границы (потому что этот угол все еще принадлежит прямоугольнику).

Answer 2

Вы пробовали это вместо этого.Затем используйте событие onclick.

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

Answer 3

как дела?

На самом деле он не «сломан», так как он должен работать, поэтому вы не можете исправить это, все элементы отображаются в браузере как прямоугольники (если вы осмотрите круглую кнопку, вы увидите, что она покрывает прямоугольная область)

Вы можете (как указал @Greg) использовать тег <area> или использовать JavaScript для следующих действий:

• Если вне координат круга, показывать обычный значок мыши; Если внутри, покажи указатель
• Если вне координат окружности, вернуть false в методе onclick; Если внутри, верните true.

Надеюсь, это поможет, дайте мне знать, если вам нужна помощь с кодом JS.

ура!