我有一个无序列表,其中包含3个列表项。每个列表项都有一张图片和3个包含文本的div。我想使用CSS使图像的边缘变得羽化。
我的网站(在这里)目前使用以下HTML代码实现了羽化效果,但是整个图像似乎都被羽化了,我只需要边缘处被强烈羽化,并且在离开图像中心约50像素的范围内向四周逐渐减少羽化。
HTML:
您可以看到我正在使用一个180px的内部投影阴影,但这使整个图像略微模糊,如果我使用50px,几乎不会注意到任何变化! 如何使边缘强烈,然后向中心渐变变弱?谢谢!
我的网站(在这里)目前使用以下HTML代码实现了羽化效果,但是整个图像似乎都被羽化了,我只需要边缘处被强烈羽化,并且在离开图像中心约50像素的范围内向四周逐渐减少羽化。
HTML:
<p class="vignette"><img src="http://upload.wikimedia.org/wikipedia/commons/f/f8/Ellen_H._Swallow_Richards_House_Boston_MA_01.jpg" alt="" /></p>
CSS:
p.vignette {
position: relative;
}
p.vignette img {
display: block;
width:80%;
margin-left:auto;
margin-right:auto;
margin-top:6%;
}
p.vignette:after {
-moz-box-shadow: inset 0 0 180px #defeec;
-webkit-box-shadow: inset 0 0 180px #defeec;
box-shadow: inset 0 0 180px #defeec;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
content: "";
}
您可以看到我正在使用一个180px的内部投影阴影,但这使整个图像略微模糊,如果我使用50px,几乎不会注意到任何变化! 如何使边缘强烈,然后向中心渐变变弱?谢谢!