CSS如何使用var()函数？代码示例

2021年3月26日17:53:59 发表评论 836 次浏览

语法如下：

var( custom_property, value )

参数：此函数接受下面列出的两个参数：

custom_property：它是必需的参数。自定义属性的名称必须以两个破折号(–)开头。
值：它是可选参数。如果自定义属性无效, 则使用它。

下面的程序说明了CSS中的var()函数：

程序：

<!-- HTML code to describes var() function in CSS -->
<!DOCTYPE html>
< html >
     < head >
         < title >var() function</ title >
         < style >
             :root {
                 --main-bg-color: Green; 
             }
              
             /* Use of var() function */
             .gfg1 {
                 background-color: var(--main-bg-color);
                 padding:10px;
             }
             .gfg2 {
                 background-color: var(--main-bg-color);
                 padding: 5px;
             }
             h1 {
                 color:green;
             }
             body {
                 text-align:center;
             }
         </ style >
     </ head >
     < body >
         < h1 >lsbin</ h1 >
         < h2 >var() function</ h2 >
         < div class = "gfg1" >lsbin</ div >< br >
         < div class = "gfg2" >A computer science portal for geeks</ div >
     </ body >
</ html >

输出如下：