您的位置:首页> 日志> 前端技术 正文
DTOP

css:box-shadow的发光效果

ggupjiji | 2011年04月29日 |

>>收藏本文 已有 1条评论

如果用过twitter,你可能已经留意到当输入框获得焦点后,它的边框会有蓝色发光的效果,并且这里运用了transition属性,使得发光效果有很平滑的过渡。本教程将讲述如何运用box-shadow属性来做到这样的效果。

twitter_input

CSS代码如下:

  1. input {
  2. transition: all 0.30s ease-in-out;
  3. -webkit-transition: all 0.30s ease-in-out;
  4. -moz-transition: all 0.30s ease-in-out;
  5. outline:none;
  6. }

这里通过运用transition属性来展现input框的变化。
同时,这里需要用outline属性来使safari和chrome的默认高亮无效。
这里在使用box-shadow属性时,为了使其不像是阴影效果而达到发光的效果,因而采用了明亮的蓝色。
同时也可以用RGBA,这样就可以控制颜色的透明度了。
代码如下:

  1. input:focus {
  2. border:#35a5e5 1px solid;
  3. box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  4. -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  5. -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  6. }

同时可以用border-radius属性来做圆角效果。
完整CSS代码如下:

  1. input {
  2. transition: all 0.30s ease-in-out;
  3. -webkit-transition: all 0.30s ease-in-out;
  4. -moz-transition: all 0.30s ease-in-out;
  5. border: #35a5e5 1px solid;
  6. border-radius: 4px;
  7. outline: none;
  8. }
  9. input:focus {
  10. box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  11. -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  12. -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  13. }