如何制作非标准形状的按钮，在其边界之外不可点击 [英] How to make non standard shape buttons, non clickable outside of it's border

问题描述

我希望能够使用html和css在网页上创建按钮. 按钮应为非标准形状，例如一侧为矩形，另一侧为圆形，等等.

I want to be able to create buttons on the web page using html and css. The buttons should be of non standard shape, like rectangular from one side and circular from another, etc.

第一个问题是如何执行此操作，第二个问题是如何进行创建，以便在圆角边框之外单击时不会被单击. 这是使按钮呈圆形的CSS代码，

The first question is how to do it, and the second is, how to make it so that it will not be clickable if clicked little outside of it's rounded border. Here is CSS code to make the button circular,

.buttons
{
    height: 50px;
    width: 50px;
    border-radius: 50px;
    border: 1px solid #000;
}

如果您尝试使用此代码，然后在按钮的圆形区域之外单击，那么它将单击，但是我希望如果不在其边框内部单击，也不要太可笑了.

If you try this code, and click outside of the button's circular area, then it will click, however I want it not to be clicable if not clicked inside of it's border.

推荐答案

这是您无法控制的.将border-radius应用于元素时，在框模型中，它仍然是矩形-您要应用的只是一种不同的渲染样式，使其呈 look 圆形.标准也没有指定这对元素的单击区域意味着什么.

This is outside your control. When applying border-radius to an element, by all means it's still rectangular in the box model - all you are applying is a different rendering style which makes it look rounded. The standards also don't specify what this means for the clicking area of the element.

一些较新的浏览器似乎在点击区域上尊重border-radius，但是要由浏览器供应商来决定是否实现它，并且如果不入侵其中的Javascript，您对此没有确定的影响.在那里计算用户点击的位置.

Some more recent browsers appear to respect border-radius for click areas, but it's up to the browser vendor to implement it or not, and you have no definitive influence over it without hacking some Javascript in there to calculate where the user clicked.

我用这个小提琴尝试了一下，结果很有趣:

I tried it with this Fiddle, and the results are funny:

• Firefox最新的稳定版看到一个矩形
• Chrome最新测试版看到一个矩形
• IE10(!!!)正确地"忽略了形状外部的点击

如前所述，这是标准中未定义的行为，因此，如果可行，则将其视为奖励.

As said, it's undefined behaviour in the standards so consider it a bonus if it works.

这篇关于如何制作非标准形状的按钮，在其边界之外不可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！