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

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

CSS中的var()函数用于为自定义属性插入值

语法如下:

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 >

输出如下:

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

支持的浏览器:var()函数支持的浏览器如下:

  • 谷歌浏览器49.0
  • 边缘15.0
  • Firefox 31.0
  • 的Safari 9.1
  • Opera 36.0

木子山

发表评论

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