box-shadow属性添加一个或者多个阴影。
语法：
<!DOCTYPE html><html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">
<style>
div {
width: 300px
height: 300px
position: absolute
}
.f {
opacity: 0.6
filter: alpha(opacity=60)
text-align: center
background-color: gray
left: 0
top: 0
z-index: 99
}
input {
position: absolute
top: 100px
left: 60px
z-index: 100
}
.b {
background-color: red
top: 100px
left: 100px
}
</style>
</head>
<body>
<div>
<div class="f"></div>
<input type="text">
</div>
<div class="b"></div>
</body>
</html>至于后面图片的那个影子，那应该是图片的，不是css写出来的
滤镜效果filter的css样式属性是微软Internet Explorer特有的，未被W3C收入，故而在火狐浏览器下尚未提供支持。但是通过js编码可以部分实现一些滤镜效果，如透明等。随着浏览器的发展CSS的功能越来越强大，大多数的滤镜效果有类似功能的CSS样式实现了。
对应表：
IE 滤镜 W3C 滤镜
Alpha：设置透明层次. grayscale 灰度
blur：创建高速度移动效果，即模糊效果. sepia 褐色
Chroma：制作专用颜色透明. saturate 饱和度
DropShadow：创建对象的固定影子. hue-rotate 色相旋转
FlipH：创建水平镜像图片. invert 反色
FlipV：创建垂直镜像图片. opacity 透明度
glow：加光辉在附近对象的边外. brightness 亮度
gray：把图片灰度化. contrast 对比度
invert：反色.blur 模糊
light：创建光源在对象上. drop-shadow 阴影
mask：创建透明掩膜在对象上.
shadow：创建偏移固定影子.
wave：波纹效果.
Xray：使对象变的像被x光照射一样.
