CSS/HTML:围绕输入字段创建一个发光的边框

Question

我想为我的表单创建一些不错的输入,我真的想知道TWITTER如何围绕他们的输入做出发光边框.

Twitter边框的示例/图片:

我也不太清楚如何创建圆角.

Answer 1

干得好:

.glowing-border {
    border: 2px solid #dadada;
    border-radius: 7px;
}

.glowing-border:focus { 
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}

现场演示: http ://jsfiddle.net/simevidas/CXUpm/1/show/

(要查看演示代码,请从URL中删除"show /")

Answer 2

这样的事情怎么样...... http://jsfiddle.net/UnsungHero97/Qwpq4/1207/

CSS

input {
    border: 1px solid #4195fc; /* some kind of blue border */

    /* other CSS styles */

    /* round the corners */
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;


    /* make it glow! */
    -webkit-box-shadow: 0px 0px 4px #4195fc;
       -moz-box-shadow: 0px 0px 4px #4195fc;
            box-shadow: 0px 0px 4px #4195fc; /* some variation of blue for the shadow */

}

Answer 3

使用正常的蓝色border,中等border-radius和蓝色box-shadow的位置0 0.