html图片边框发光,css – 围绕div发光,边框和颜色

以下是完整的代码来完成样式的div,就像twitter登录输入一样.蓝色边框的样式是选择器div [contenteditable]：焦点的框阴影和边框样式.

Live demo here (click).

标记：

Username or email

CSS：

div[contenteditable]:focus {

border: 1px solid rgb(86, 180, 239);

box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);

}

div[contenteditable] {

width: 97%;

max-width: 280px;

margin-right: 10px;

font-family: Arial,sans-serif;

-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075);

box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075);

display: inline-block;

padding: 4px;

margin: 0;

outline: 0;

background-color: #fff;

border: 1px solid #ccc;

border-radius: 3px;

font-size: 13px;

line-height: 20px;

}