使用 CSS 在整个页面上制作圆角边角？

Question

我正在尝试将 CSS 添加到我的 PWA 应用程序，以便它在“刘海”设备上看起来更好。我粗略地画了它并用红色箭头指出了它。如果您需要检查 CSS 类: https://kyle.awayan.com/ 元素，这是我的网站。是否有关于如何实现此目的的任何建议，以获得 border-radius 或在全球范围内与整个页面一起使用的东西？我试着把它放在 body 但它不起作用。另一个编辑：尝试将 border-radius 添加到包装的 div （特别是 gallery 如果你检查我的网站元素），它使所有项目（图片，菜单等）变圆，但不仅仅是页面的边缘。

Answer 1

我知道了，我只是用 __next div 作为包装 div，然后把这个 CSS 从这个 https://codepen.io/chriscoyier/pen/EmKCa (which was from https://css-tricks.com/body-border-rounded-inside/ 放在这里） .修改后，我留下了这个：

#__next {
    border-radius: 10px;
    overflow-y: scroll;
}

看来我必须添加 overflow-y: scroll 才能使 border-radius 起作用。

编辑：当我把它放在 body 标签中时它也有效。仅供参考 overflow-y: scroll 与滚动侦听器混淆，因此我的无限滚动不再起作用。可能不想要这个解决方案，因为我不想将所有滚动侦听器放在一个 div 上......我的网站上有很多东西对滚动不同页面做出反应。但这里是想要实现同样目标的人的答案。

Answer 2

对我来说，上述边框是通过 CSS 中的以下代码实现的：

overflow-y: scroll;
style="border: solid; padding: 15px; border-radius: 15px "

使用 CSS 在整个页面上制作圆角边角？

Make rounded edge corners on whole page with CSS?

css

next.js

iphone-x