CSS滤镜之——Blur模糊实现内阴影效果


CSS滤镜之——Blur模糊实现内阴影效果，一般我们习惯用外阴影，不过偶尔用一下内阴影也别有一番味道，不同的视觉体验，会带来不同的感受。本代码经过了多浏览器测试，应该不会有什么兼容性问题。

答案：<html>
<head>
<title>内阴影效果</title>
<head>
<style>
.baseBlock{
    width:220px;
    position:relative;
    overflow:hidden;
}
.baseBlockIn{
    padding:10px 15px;
    background-color:#888\9;
    box-shadow:inset 30px 30px 20px #888;
    -moz-box-shadow:inset 30px 30px 20px #888;
    -webkit-box-shadow:inset 30px 30px 20px #888;
}
.ieShadow{
    _width:220px;
    _height:220px;
    filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=20);
    -ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=20)";
    background-color:#fff\9;
    position:absolute;
    top:10px;
    left:10px;
    bottom:-10px;
    right:-10px;
}
.content{
    position:relative;
    z-index:1;
}
</style>
</head>
<body>
<div class="baseBlock">
    <div class="baseBlockIn">
        <div class="ieShadow"></div>
        <div class="content">CSS使用Filter的Blur模糊滤镜实现的Div区域内阴影效果，猛然间想到的问题，感谢灵感！不同的视觉体验，会带来不同的感受。</div>
    </div> 
</div>
</body>
</html>

上一个：计算文本框允许输入字符的百分比
下一个：JavaScript随机抽奖程序

更多图片编程知识: