Question

css怎么实现输入框聚焦时候边框阴影淡出的呢？

如题。

Answer 1

input:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

试试这段。

Answer 2

代码如下：

<style type="text/css">
.div_shadow{
width:600px;
height:450px;
border:#909090 1px solid;
background:#fff;
color:#333;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; /* For IE 8 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); /* For IE 5.5 - 7 */
-moz-box-shadow: 2px 2px 10px #909090;/* for firefox */
-webkit-box-shadow: 2px 2px 10px #909090;/* for safari or chrome */
box-shadow:2px 2px 10px #909090;/* for opera or ie9 */
}

Answer 3

用CSS实现阴影效果就要用CSS3来实现，而且只有支持CSS3的浏览器能看到效果。IE的话9以上能看到阴影，以下的都看不到