CSS的var()函数怎么用?入门百科_函数使用教程

CSS中的var()函数可用于插入自定义属性(有时称为“css变量”)的值,而不是插入其他属性值的任何部分。随着sass,less预编译的流行,css也随即推出了变量定义var函数。var()函数,就如同sass和less等预编译软件一样,可以定义变量并且进行对应的使用。语法:var( custom_property, value )参数:●custom_p

CSS的var()函数怎么用?入门百科

CSS中的var()函数可用于插入自定义属性(有时称为“css变量”)的值,而不是插入其他属性值的任何部分。随着sass,less预编译的流行,css也随即推出了变量定义var函数。var()函数,就如同sass和less等预编译软件一样,可以定义变量并且进行对应的使用。

CSS的var()函数怎么用?入门百科_函数使用教程

语法:

var( custom_property, value )

参数:

●custom_property:这是必需的参数。自定义属性的名称必须以两个破折号( – )开头。

●value:可选参数。自定义属性的回退值,用于自定义属性在使用的上下文中无效的情况。如果自定义属性无效,则使用它。

示例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>var()函数</title> 
        <style> 
            :root { 
                --main-bg-color: pink;  
            } 
              
            /* 使用var()函数 */ 
            .demo1 { 
                background-color: var(--main-bg-color); 
                padding:10px; 
            } 
            .demo2 { 
                background-color: var(--main-bg-color); 
                padding: 5px; 
            } 
            .demo3 { 
                background-color: var(--text-color, plum); 
                padding: 5px; 
            } 
            body { 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
        <h2>var()函数</h2> 
        <div class = "demo1">Hello</div><br> 
        <div class = "demo2">这是一段测试文本!</div> <br> 
        <div class = "demo3">这是一段测试文本!</div> 
    </body> 
</html>
海计划公众号
(0)
上一篇 2020/03/20 06:50
下一篇 2020/03/20 06:50

您可能感兴趣的内容