如何用纯CSS3绘制逼真的平滑缝阴影？ [英] How to draw realistic smooth slit shadow with Pure CSS3?

问题描述

如何使用纯CSS创建像下面的阴影效果？

我是CSS的新手。
以下是我到目前为止所尝试的，但我无法接近我想要的。请告诉我如何使它看起来像图像中的阴影？谢谢！

  box-shadow：1px 1px 5px＃999999 inset 
  

解决方案

这是我可以得到的最接近的：，以了解它们的使用方式。

对于两个阴影（两侧），您需要4个阴影（

How can I make a shadow effect like the one below with pure CSS?

I am new to CSS. The following is what I have tried so far, but I am unable to come close to what I want. Please advise how I can make it look like the shadow in the image? Thanks!

box-shadow: 1px 1px 5px #999999 inset

解决方案

This is the closest I could get : Demo. I think it's actually not bad.

It combines a black shadow and a white one on top of it.

.yourclass{
    background-color: #fff;
    box-shadow:  -15px 0px 60px 25px #ffffff inset, 
        5px 0px 10px -5px #000000 inset;
}

Browsers' shadows smoothing might differ. I'm using chrome so you might want to tweek the values to get a cross-browser visual effect...

Read the CSS Tricks article about box-shadows to get how they're used.

For two shadows (both sides) you need 4 shadows (demo) :

Result:

.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;
}

Beware, browsers' shadows rendering/smoothing can differ a lot. I'm using chrome so you might want to tweek the values to get a cross-browser visual effect...

For more info on css shadows, read this article from CSS Tricks

这篇关于如何用纯CSS3绘制逼真的平滑缝阴影？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！