CSS 白色内阴影

标签 css

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

我尝试过使用其他颜色 — 效果很好,但白色不起作用。

JSBin example

谢谢!

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

enter image description here

最佳答案

或者,您可以在内容上方的图层上创建一个简单的叠加层,并将其设为您的框阴影

.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 白色内阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24626533/

相关文章:

javascript - 刷新后使用 javascript 更改 div 背景时出错

html - 难以使网站移动响应

css - 防止引号换行

html - 设置 css 形状的背景

javascript - jQuery ul li 切换菜单

css - 如何在 Drupal Bootstrap 7.x-2.2 的菜单上添加事件标记

div 内链接之间的 Css 间隙

html - IE 8/10 兼容性问题 : My aside is dropping below my main, 当它应该并排时

html - CSS Bug : Footer under images on Firefox, 但在其他 Web 浏览器上位于图像之上

php - 从 css 和 php 创建简单的条形图