CSS用于输入元素周围的模糊轮廓

Question

我所知道的可能的大纲样式如下所示。

• 点缀
• 虚线
• 固体
• 双
• 槽
• 脊
• 插入
• 首先

这些都没有围绕输入元素的轮廓，如下所示：
使用CSS样式可以为某个输入元素设置如上所示的样式吗？

Answer 1

它看起来像浏览器默认行为，但您可以使用css3 box-shadow

伪造它

http://jsfiddle.net/meo/BndwU/

或您的颜色： http://jsfiddle.net/meo/BndwU/1/

或奖励焦点动画： http://jsfiddle.net/meo/BndwU/2/

Answer 2

这仅适用于接受CSS {3}}等

box-shadow

See example →

Answer 3

使用新的CSS 3 box-shadow，您可以在输入框周围放置渐变边框。首先使用包含以下内容的新类将其包装在一个span中：

.coolio {
  box-shadow:rgba(0,0,0,0.5) 0px 0px 24px; 
}

以下是一个工作示例：Gradient Shadow Outline Demo