CSS env()函数用法解析和代码示例

本文概述的env()函数用于将用户代理定义的环境变量的值插入CSS。它与CSS中的var()几乎相同, 除了这些值是用户代理定义的, 而不是用户定义的。这些变量是全局范围的。
语法如下：

env( < custom-ident> , < declaration-value> )

【CSS env()函数用法解析和代码示例】注意：请注意, env()属性值区分大小写。
属性值：
安全区域设置顶部：
它定义了从视口边缘开始的矩形的顶部。
语法如下：

env(SAFE-AREA-INSET-TOP, Integer_value)

例子：
的HTML

< !DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < style > p { background-color: green; width: fit-content; color: white; font-size: 20px; border: env(SAFE-AREA-INSET-TOP, 5px) solid black; padding: 10px; padding: env(SAFE-AREA-INSET-TOP, 50px) env(safe-area-inset-right, 50px) env(safe-area-inset-bottom, 50px) env(safe-area-inset-left, 50px) } < / style > < / head > < body > < h2 > 50px padding from top< / h2 > < p > Geeks for geeks< / p > < / body > < / html >

输出如下：

文章图片
安全区域设置权：
它定义了从视口边缘开始的矩形的右侧。
语法如下：

env(SAFE-AREA-INSET-RIGHT, Integer_value);

例子：
的HTML

< !DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < style > p { background-color: green; width: fit-content; color: white; font-size: 20px; border: env(SAFE-AREA-INSET-TOP, 5px) solid black; padding: 10px; padding: env(safe-area-inset-top, 50px) env(SAFE-AREA-INSET-RIGHT, 50px) env(safe-area-inset-bottom, 50px) env(safe-area-inset-left, 50px) } < / style > < / head > < body > < h2 > 50px padding from right< / h2 > < p > Geeks for geeks< / p > < / body > < / html >

输出如下：

文章图片
安全区域插入左：
它定义了从视口边缘开始的矩形的左侧。
语法如下：

env(SAFE-AREA-INSET-LEFT, Integer_value);

例子：
的HTML

< !DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < style > p { background-color: green; width: fit-content; color: white; font-size: 20px; border: env(SAFE-AREA-INSET-TOP, 5px) solid black; padding: 10px; padding: env(safe-area-inset-top, 50px) env(safe-area-inset-bottom, 50px) env(safe-area-inset-right, 50px) env(SAFE-AREA-INSET-LEFT, 50px) } < / style > < / head > < body > < h2 > 50px padding from left< / h2 > < p > Geeks for geeks< / p > < / body > < / html >

输出如下：

文章图片
安全区域设置底部：
它从视口的边缘定义矩形的底部。
语法如下：

env(SAFE-AREA-INSET-BOTTOM, Integer_value);

例子：
的HTML

< !DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < style > p { background-color: green; width: fit-content; color: white; font-size: 20px; border: env(SAFE-AREA-INSET-TOP, 5px) solid black; padding: 10px; padding: env(safe-area-inset-top, 50px) env(safe-area-inset-left, 50px) env(SAFE-AREA-INSET-BOTTOM, 50px) env(safe-area-inset-right, 50px) } < / style > < / head > < body > < h2 > 50px padding from bottom< / h2 > < p > Geeks for geeks< / p > < / body > < / html >

输出如下：