点击渐变边框

Posted 2023-03-05

【中文标题】点击渐变边框

【英文标题】：Gradient border on click

【发布时间】：2014-01-08 05:51:04

【问题描述】：

我注意到，如果单击我网站上的按钮（如下例所示），按钮周围会显示渐变边框。我尝试了几种浏览器，但这只显示在谷歌浏览器中。

有没有办法去掉这个 CSS wize？

【问题讨论】：

我差点以为你编造了这个问题，只是为了让人们点击赞成箭头。看起来和 Stack 几乎一模一样。

@TreeTree 我敢肯定其中有几个人正在测试它:)

@TreeTree：哈哈！当我单击否决按钮时，我没有选择图片是有原因的；）

【参考方案1】：

您可以使用outline:none 禁用大纲。

input,
select,
textarea,
button 
  outline: none;

为了保证焦点状态的安全：

input:focus,
select:focus,
textarea:focus,
button:focus 
  outline: none;

但是，有些人认为由于可访问性问题而禁用大纲不是一个好主意 (http://outlinenone.com/)

【讨论】：

+1 链接，我经常使用标签导航，因为在很多情况下它比鼠标快得多。确保在移除其轮廓时为焦点元素提供另一个视觉线索。

【参考方案2】：

这是为了表明该元素处于活动状态。要禁用此功能：

#element.focus
    outline:0;