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

2021年3月11日18:09:50 发表评论 862 次浏览

本文概述

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 >

输出如下:

CSS env()函数1

安全区域设置权:

它定义了从视口边缘开始的矩形的右侧。

语法如下:

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 >

输出如下:

CSS env()函数2

安全区域插入左:

它定义了从视口边缘开始的矩形的左侧。

语法如下:

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 >

输出如下:

CSS env()函数3

安全区域设置底部:

它从视口的边缘定义矩形的底部。

语法如下:

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 >

输出如下:

CSS env()函数4

支持的浏览器:

  • 边缘
  • 火狐浏览器
  • 苹果浏览器
  • 歌剧

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: