env()

env() CSS 函数以类似于 var() 函数和 custom properties 的方式将用户代理定义的环境变量值插入你的 CSS 中。区别在于，环境变量除了由用户代理定义而不是由用户定义外，还被全局作用在文档中，而自定义属性则限定在声明它们的元素中。为了告诉浏览器使用屏幕上所有的可用空间，并以此使用 env() 变量，我们需要添加一个新的视口元值：

<meta name="viewport" content="... viewport-fit=cover" />

body {
  padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px)
    env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px);
}

另外，与自定义属性不同，自定义属性不能在声明之外使用，而 env() 函数可以代替属性值或描述符的任何部分（例如，在 媒体查询的规则 中）。随着规范的发展，它也可能在像是 选择器 等其他地方使用。

最初由 iOS 浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的 safe-area-inset-* 值可用于确保内容即使在非矩形的视区中也可以完全显示。