如何用PureCSS3绘制逼真的光滑切口阴影？-HowtodrawrealisticsmoothslitshadowwithPureCSS3?

20  

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

浏览器的阴影平滑可能不同。我正在使用chrome,因此您可能需要调整值以获得跨浏览器的视觉效果......

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

阅读有关盒阴影的CSS Tricks文章,了解它们的使用方法。

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

对于两个阴影(两侧),您需要4个阴影(演示):

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

请注意,浏览器的阴影渲染/平滑可能会有很大差异。我正在使用chrome,因此您可能需要调整值以获得跨浏览器的视觉效果......

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

有关css阴影的更多信息,请阅读CSS Tricks中的这篇文章

1  

What you want is basically the opposite of a page curl shadow. Take a look at this tutorial - you should be able to easily adapt it.

你想要的基本上是页面卷曲阴影的反面。看一下本教程 - 您应该能够轻松地对其进行调整。

Here is an example: jsFiddle

这是一个例子:jsFiddle

div {
    position: relative;
    width: 250px;
    height: 150px;
    margin: 100px auto;

    border: 1px solid black;
    background-color: white;
}

div:after {
    position: absolute;
    height: 80%;
    width: 10px;
    content: " ";
    right: 0px;
    top: 10%;
    background: transparent;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
    z-index: -1;
}

We insert a pseudo-element, position it below our div and have it cast a shadow. This way, you have control over the shadows height and position.

我们插入一个伪元素,将它放在我们的div下面并让它投下阴影。这样,您就可以控制阴影的高度和位置。