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

前端之家收集整理的这篇文章主要介绍了css – 围绕div发光,边框和颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有办法在div附近添加光晕?看看twitter登录,输入框周围是否有蓝色的光环,可以为div做吗?

解决方法

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

标记

<div contenteditable="true">Username or email</div>

CSS:

div[contenteditable]:focus {
  border: 1px solid rgb(86,180,239);
  Box-shadow: 0px 1px 3px rgba(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,.05),0 1px 0 rgba(255,255,.075);
  Box-shadow: inset 0 1px 3px rgba(0,.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;
}

猜你在找的CSS相关文章