css3box-shadow发光效果
如果⽤过twitter，你可能已经留意到当输⼊框获得焦点后，它的边框会有蓝⾊发光的效果，并且这⾥运⽤了transition属性，使得发光效果有很平滑的过渡。本教程将讲述如何运⽤box-shadow属性来做到这样的效果。
CSS代码如下：
input {
transition: all 0.30s ease-in-out;
--transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
outline:none;
}
这⾥通过运⽤transition属性来展现input框的变化。
同时，这⾥需要⽤outline属性来使safari和chrome的默认⾼亮⽆效。
这⾥在使⽤box-shadow属性时，为了使其不像是阴影效果⽽达到发光的效果，因⽽采⽤了明亮的蓝⾊。
同时也可以⽤RGBA，这样就可以控制颜⾊的透明度了。
代码如下：
input:focus {
border:#35a5e5 1px solid;
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
borderbox--box-shadow: 0 0 5px rgba(81, 203, 238, 1);
: 0 0 5px rgba(81, 203, 238, 1);
}
同时可以⽤border-radius属性来做圆⾓效果。
完整CSS代码如下：
input {
transition: all 0.30s ease-in-out;
--transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
border: #35a5e5 1px solid;
border-radius: 4px;
outline: none;
}
input:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-
webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
: 0 0 5px rgba(81, 203, 238, 1);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。