如何使用纯CSS制作类似下面的阴影效果?
我是CSS的新手.以下是我到目前为止所尝试的内容,但我无法接近我想要的内容.请告诉我如何让它看起来像图像中的阴影?谢谢!
box-shadow: 1px 1px 5px #999999 inset
Armel Larcie.. 21
这是我能得到的最接近的:演示.我认为它实际上并不坏.
它结合了黑色阴影和白色阴影.
.yourclass{ background-color: #fff; box-shadow: -15px 0px 60px 25px #ffffff inset, 5px 0px 10px -5px #000000 inset; }
浏览器的阴影平滑可能不同.我正在使用chrome,因此您可能需要调整值以获得跨浏览器的视觉效果......
阅读有关盒阴影的CSS Tricks文章,了解它们的使用方法.
对于两个阴影(两侧),您需要4个阴影(演示):
结果:
.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中的这篇文章
这是我能得到的最接近的:演示.我认为它实际上并不坏.
它结合了黑色阴影和白色阴影.
.yourclass{ background-color: #fff; box-shadow: -15px 0px 60px 25px #ffffff inset, 5px 0px 10px -5px #000000 inset; }
浏览器的阴影平滑可能不同.我正在使用chrome,因此您可能需要调整值以获得跨浏览器的视觉效果......
阅读有关盒阴影的CSS Tricks文章,了解它们的使用方法.
对于两个阴影(两侧),您需要4个阴影(演示):
结果:
.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中的这篇文章