如何使用纯 CSS 制作如下图所示的阴影效果?
我是 CSS 新手。 以下是我到目前为止所做的尝试,但我无法接近我想要的。请告诉我如何让它看起来像图像中的阴影?谢谢!
box-shadow: 1px 1px 5px #999999 inset
最佳答案
这是我能得到的最接近的:Demo .我觉得其实还不错。
它结合了一个黑色阴影和一个白色阴影。
.yourclass{
background-color: #fff;
box-shadow: -15px 0px 60px 25px #ffffff inset,
5px 0px 10px -5px #000000 inset;
}
浏览器的阴影平滑可能不同。我正在使用 chrome,所以你可能想调整值以获得跨浏览器的视觉效果......
阅读CSS Tricks article about box-shadows了解它们的使用方式。
对于两个阴影(两侧)你需要 4 个阴影(demo):
结果:
.yourclass{
background-color: #fff;
box-shadow: 0px 100px 50px -40px #ffffff inset,
0px -100px 50px -40px #ffffff inset,
-5px 0px 10px -5px rgba(0,0,0,0.5) inset,
5px 0px 10px -5px rgba(0,0,0,0.5) inset;
}
请注意,浏览器的阴影渲染/平滑可能会有很大差异。我正在使用 chrome,所以你可能想调整值以获得跨浏览器的视觉效果......
有关 css 阴影的更多信息,请阅读来自 CSS Tricks 的这篇文章
关于css - 如何用纯CSS3画出逼真的平滑狭缝阴影?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20596405/