本文概述
的env()函数用于将用户代理定义的环境变量的值插入CSS。它与CSS中的var()几乎相同, 除了这些值是用户代理定义的, 而不是用户定义的。这些变量是全局范围的。
语法如下：
env( <custom-ident> , <declaration-value> )注意：请注意, 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 >输出如下：
支持的浏览器：
- 铬
- 边缘
- 火狐浏览器
- 苹果浏览器
- 歌剧
