logo标签列表

CSS白色内阴影

css
3

如何在div中添加白色内阴影？

我已经尝试了其他颜色，效果很好，但是白色似乎不起作用。

JSBin示例

谢谢！

更新： 我需要像这样的效果：

enter image description here

2
对我来说运行良好。http://jsbin.com/qudobipu/1/edit?html,css,output 你确定你没有将背景颜色也设置为白色吗？白色在白色上是看不见的... - JJJ
1
看起来你需要一些内部内容包装器，http://jsbin.com/tiludaqu/1/， box-shadow 似乎被放到了内容后面，除非使用一些内部内容包装器（就像演示中一样），否则无法将其置于前面。 - King King
2个回答
2

另外，您可以在内容上面的图层上创建一个简单的覆盖层，并将其设置为您的box-shadow。

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

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

使用灰色填充白色区域。 如果我理解正确，您想在白色输入框内部添加白色阴影？您需要使用不同的颜色来创建阴影。 我可能误解了，不确定。如果有帮助请告诉我，如果我没有理解，请指出。
谢谢您的回答！请查看更新的问题。 - Evgeny Samsonov
好的，我会进行调查。一旦你找到解决方案，请告诉我停止寻找。祝你好运！ - SrAxi
只能让白色显示正常，改变div背景或制作灰色阴影。无法在白色背景div上制作白色阴影。 - SrAxi
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接