CSS 函数

CSS 中的 env() 函数在向 CSS 中用户定义的环境变量添加值时非常有用，就像 var() 函数和其他自定义属性。环境变量通常由用户代理（例如网络浏览器）提供，并且可以在 CSS 中使用，以根据各种因素（例如设备特征或用户偏好）调整样式。

可以使用环境变量代替属性值的任何部分或描述符的任何部分，例如在媒体查询规则中。

可能的值

env() 函数可以具有以下值:

  • safe-area-inset-top、safe-area-inset-right、safe-area-inset-bottom、safe-area-inset-left：变量通过视口边缘的顶部、右侧、底部和左侧插图定义矩形。

    • 这些插图可以安全地放置内容，而不会被切割非矩形显示器的形状。

    • 对于矩形视口，例如笔记本电脑显示器，该值保持为零。

    • 对于非矩形显示器，例如表盘，设置四个值以创建一个矩形，以便内容在矩形内清晰可见。

  • titlebar-area-x、titlebar-area-y、titlebar-area-width、titlebar-area-height：用于安装在桌面设备上的 PWA。这些变量不允许内容与窗口控制按钮（最小化、最大化和关闭）重叠。Keyboard-inset-top、keyboard-inset-right、keyboard-inset-bottom、keyboard-inset-left、keyboard-inset-width、keyboard-inset-height：说明有关屏幕虚拟键盘外观的详细信息。变量通过距视口边缘的顶部、右侧、底部和左侧插入来定义矩形。宽度和高度插图是根据其他插图值测量的。

用户定义的属性名称区分大小写，这与其他 CSS 属性不同.

语法

property: env(variable-name, [fallback]);

  • variable-name:环境变量的名称。

  • [后备]:（可选）。如果未定义环境变量，则使用后备值。

后备的语法允许使用逗号，就像其他语法一样自定义属性。但是，如果属性值不支持逗号，则该值将被视为无效。

用户定义的属性不会被所有属性重置。

CSS env(): 值的组合

以下示例演示了 env() 函数与安全值的使用 - safe-area-inset-top、safe-area-inset-right、safe-area-inset-bottom、safe-area-inset-left的用法：

<html>
<head>
<style>
   .text-style {
      background-color: darkblue;
      width: max-content;
      color: white;
      font-size: 25px;
      border: env(SAFE-AREA-INSET-TOP, 10px) inset lightblue;
      padding: 10px;
      padding: env(SAFE-AREA-INSET-TOP, 2.5em)
               env(SAFE-AREA-INSET-RIGHT, 2.5em) 
               env(SAFE-AREA-INSET-BOTTOM, 2.5em) 
               env(SAFE-AREA-INSET-LEFT, 2.5em)
   }
</style>
</head> 
<body>
    <h2>env() 函数例子</h2>
    <p class="text-style">通过环境变量添加的填充</p>
</body>
</html>