Question

如何在div中制作白色内部阴影？

我尝试过其他颜色 - 工作正常，但白色不起作用。

谢谢！

更新：我需要这样的东西：

enter image description here

Answer 1

box-shadow: grey 0px 30px 40px -2em inset;

将灰色变为白色。如果我理解得很好，你想在白色输入中有白色阴影吗？你需要一种不同的颜色来制作阴影。

我可能误解了，不知道。告诉我这是否有帮助，或者我只是不理解。

Answer 2

或者，您可以在内容上方的图层上创建一个简单的叠加层，并使其成为盒子阴影

.container {
    height: 300px;
    width: 300px;
    background: #fff;
    border: 1px solid #cecece;
    border-radius: 4px;
    position: relative;
}

.container .content {
    overflow: auto;
    height: 100%;
}

.container:after {
    width: calc(100% - 20px);
    height: 110px;
    background: linear-gradient(180deg, #fff, transparent);
    position: absolute;
    top: 0;
    left: 0;
    content: close-quote;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>
<body>
    <div class="container">
        <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro nesciunt quo fuga quasi vero modi aspernatur
            nemo harum sapiente nobis ex aliquam excepturi possimus sit laboriosam libero adipisci non aliquid.Lorem
            ipsum dolor sit amet, consectetur adipisicing elit. Dicta libero modi debitis ipsa architecto nihil
            exercitationem cumque natus ducimus at quae doloribus illum optio aut expedita eveniet magnam officiis
            qui!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam officia reiciendis doloremque neque
            debitis aperiam voluptates non libero atque ut iure rem consequuntur alias commodi velit asperiores sit
            nesciunt minima. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos dolor ab animi ullam id
            incidunt tempore atque doloremque quidem quaerat soluta eaque expedita aspernatur velit reprehenderit
            doloribus similique. Quod non.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit delectus iste
            aliquid vero ut? Odio quas asperiores odit velit vitae aspernatur beatae! Adipisci molestias placeat maiores
            eos voluptatum assumenda sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci similique
            quos fugit nostrum neque sit repudiandae error laborum possimus voluptatum molestiae impedit quo repellendus
            minus corrupti doloribus itaque ipsa consequatur!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Consequuntur molestias odit numquam soluta veniam saepe incidunt dolore praesentium nobis labore amet cumque
            aliquam et consectetur est at quis voluptas doloremque?
        </div>
    </div>
</body>
</html>

CSS白色内在阴影

2 个答案: