html - 如何使用css将顶部内阴影应用于身体

Question

我是前端 Web 开发的初学者，但遇到了一个问题。我想像火种一样在窗口顶部应用内阴影：-像这样

那么我怎样才能只使用 HTML 和 CSS 来实现呢？

标签： htmlcssfrontend

Answer 1

我只在div上应用了阴影，您也可以通过简单地在 css 中选择body而不是div元素来应用在body上。

div {
    width: 400px;
    height: 300px;
    background-color: rgb(230, 205, 108);
    box-shadow: inset 0px 32px 14px -12px rgba(0,0,0,0.5);
}

<div>

<!-- You can use image as well, background color is only use for demonstration  -->

</div>