填充半径是否有属性或解决方法？

Question

我使用的是圆形按钮， border-radius:50%;

我的元素中有一个元素，目的是让整个按钮都可以点击，而不仅仅是元素中的内容。

当我向元素添加填充时，它使整个按钮都可以点击，但是由于 border-radius 是 50%，按钮的角不应该被点击，是可点击的。

我希望这足以概述我的问题，如果可能的话我会包括一个 jsfiddle。

https://jsfiddle.net/nmcloota/7c95q1ov/5/

Answer 1

将 overflow: hidden; 添加到您的 parent 按钮，这样 child 的内容将被隐藏

button {
    height:200px;
    width:200px;
    background-color:gold;
    border-radius: 50%;
    overflow: hidden;
}

https://jsfiddle.net/nd5po7rg/1/ 我更新了你的 fiddle

编辑： 我应用了更多样式以使文本更居中看看：https://jsfiddle.net/1fd5rksg/19/

Answer 2

您好，如果我没理解错的话，您要找的是这样的：

// Show an element
var show = function (elem) {
 elem.classList.add('is-visible');
};

// Hide an element
var hide = function (elem) {
 elem.classList.remove('is-visible');
};

// Toggle element visibility
var toggle = function (elem) {
 elem.classList.toggle('is-visible');
};

// Listen for click events
document.addEventListener('click', function (event) {

 // Make sure clicked element is our toggle
 if (!event.target.classList.contains('toggle')) return;

 // Prevent default link behavior
 event.preventDefault();

 // Get the content
 var content = document.querySelector(event.target.hash);
 if (!content) return;

 // Toggle the content
 toggle(content);

}, false);

.toggle-content {
 display: none;
}

.toggle-content.is-visible {
 display: block;
}

button {
 height:200px;
 width:200px;
 background-color:gold;
 border-radius: 50%;
  cursor: pointer;

}
.with-padding {
 padding:50px;
}

   <button>
     <a class="toggle with-padding" href="#example">
       Click me to make my friend appear/disappear
     </a>
   </button>
   <button class="toggle-content" id="example">
        I am friend</button>

希望对您有所帮助。

填充半径是否有属性或解决方法？

Is there a property or workaround for padding-radius?

html

javascript

css

border

padding

填充半径是否有 属性 或解决方法？

Is there a property or workaround for padding-radius?

html

javascript

css

border

padding

填充半径是否有属性或解决方法？