gpt4 book ai didi

CSS 白色内阴影

转载 作者:行者123 更新时间:2023-11-28 12:14:50 26 4
gpt4 key购买 nike

如何在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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com