自定义属性使用以 --- 开头的名称，例如 --color-name。这些属性可以存储值，然后可以使用 var（） 函数在其他元素中使用这些值。
自定义属性特定于元素，其值遵循级联规则，自定义属性的值由级联算法确定。
可能的值
- <declaration-value> - 此值可以是标记的任意组合，但不得包含某些不允许的标记。它指定了有效声明可以具有哪些值作为其值。
适用于
所有 HTML 元素。
语法
--keywordValue: right;
--colorValue: #e74c3c;
--complexValue: 5px 10px rgb(238, 50, 17);
使用“--”定义自定义属性时，请记住它们区分大小写。“--my-color”和“--My-color”的值不同，它们是独立的变量。
CSS 自定义属性 - 值中的逗号
以下语法演示如何使用逗号使用多个值。transform： scale（var（--scale， 1.1， 1.5）） 属性定义了第一个逗号（分隔回退逗号）和第二个逗号（值 -
button {
transform: scale(var(--scale, 1.1, 1.5));
}
CSS 自定义属性
以下示例演示了自定义属性的使用 -
<html>
<head>
<style>
:root {
--red-color: red;
--green-color: rgb(125, 226, 31);
}
div {
width: 200px;
height: 100px;
margin: 10px;
}
.box1 {
background-color: var(--green-color);
color: var(--red-color);
}
.box2 {
background-color: var(--red-color);
color: var(--green-color);
}
.box3 {
--pink-color: rgb(247, 30, 193);
}
.box3 p {
color: var(--pink-color);
}
</style>
</head>
<body>
<div class="box1">
Green Background, Red Text
</div>
<div class="box2">
Red Background, Green Text
</div>
<div class="box3">
<p>Pink Text</p>
</div>
</body>
</html>
CSS 自定义属性 - 设置值
以下示例演示可以使用另一个自定义属性来设置自定义属性的值 -
<html>
<head>
<style>
html {
--red-color: #e92424;
--green-color: #2c1fdd;
--yellow-color: #f6f867;
--back: var(--yellow-color);
--para: var(--green-color);
--border: var(--red-color);
}
div {
width: 200px;
height: 150px;
padding: 10px;
background-color: var(--back);
border: 3px solid var(--border);
}
h3 {
color: var(--green-color);
text-align: center;
}
p {
color: var(--para);
}
</style>
</head>
<body>
<div>
<h3>Tutorialspoint</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
</div>
</body>
</html>
CSS 自定义属性 - 分割颜色
以下示例演示当您将鼠标悬停在框上时，通过修改 --h、--s、--l 和 --a 的值来更改背景颜色 -
<html>
<head>
<style>
.box {
width: 150px;
width: 150px;
padding: 10px;
--h: 0; /* hue */
--s: 70%; /* saturation */
--l: 50%; /* lightness */
--a: 1; /* alpha */
background-color: hsl(var(--h) var(--s) var(--l) / var(--a));
color: white;
}
.box:hover {
--l: 75%;
}
.box:focus {
--s: 75%;
}
.box[disabled] {
--s: 0%;
--a: 0.5;
}
</style>
</head>
<body>
<div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
</div>
</body>
</html>
CSS 自定义属性 - Shadow
以下示例演示了具有 --shadow 值的框阴影效果。框阴影最初是 2px，但当您将鼠标悬停在它上面时，阴影增加到 10px -
<html>
<head>
<style>
.box {
width: 150px;
width: 150px;
padding: 10px;
margin: 30px;
--shadow: 2px;
background-color: aqua;
box-shadow: 0 0 20px var(--shadow) red;
}
.box:hover {
--shadow: 10px;
}
</style>
</head>
<body>
<div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
</div>
</body>
</html>
CSS 自定义属性 - 渐变
以下示例演示了具有渐变背景的框从绿色过渡到黄色再到红色。渐变角最初为 90 度，但当您将鼠标悬停在其上时，渐变角变为 180 度 -
<html>
<head>
<style>
.box {
width: 150px;
width: 150px;
padding: 10px;
margin: 30px;
--gradient-angle: 90deg;
background: linear-gradient(var(--gradient-angle), green, yellow, red);
}
.box:hover {
--gradient-angle: 180deg;
}
</style>
</head>
<body>
<div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
</div>
</body>
</html>
CSS 自定义属性 - 网格
以下示例演示了网格布局，其中列的宽度根据屏幕宽度而变化。--boundary 的值最初是 30px，但是当您调整浏览器窗口的大小时，--boundary 值会变为容器宽度的 40% -
<html>
<head>
<style>
.box {
background-color: lightcoral;
display: grid;
--boundary: 30px;
grid-template-columns: var(--boundary) 1fr var(--boundary);
}
@media (max-width: 800px) {
.box {
--boundary: 40%;
}
}
</style>
</head>
<body>
<div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
</div>
</body>
</html>
CSS 自定义属性 - 转换
以下示例演示了使用自定义属性的转换效果。当您将鼠标悬停在按钮上时，它会缩小到原始大小的 80%，当您单击它时，它会向下移动 3px -
<html>
<head>
<style>
button {
transform: var(--scale-button, scale(1)) var(--translate-button, translate(0));
padding: 10px;
background-color: yellow;
}
button:active {
--translate-button: translate(0, 3px);
}
button:hover {
--scale-button: scale(0.8);
}
</style>
</head>
<body>
<button>
Tutorialspoint
</button>
</body>
</html>
CSS 自定义属性 - 单位类型的串联
以下示例演示如何使用 CSS 自定义属性动态设置字体大小。calc（） 函数通过将自定义属性 --size-val 和 --pixel-values 相乘来计算大小 -
<html>
<head>
<style>
html {
--size-val: 24;
--unit-val: px;
font-size: var(--size-val) + var(--unit-val);
font-size: calc(var(--size-val) * 1px);
--pixel-values: 1px;
font-size: calc(var(--size-val) * var(--pixel-values));
}
.box {
width: 200px;
height: 150px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>
CSS 自定义属性 - 使用级联
以下示例演示了如何通过级联使用 CSS 自定义属性。第一个框使用默认的全局 --background-color 值（黄色），第二个框使用本地 --background-color 值（浅蓝色） -
<html>
<head>
<style>
html {
--background-color: yellow;
--color: red;
}
.container {
--background-color: lightblue;
}
.box {
background: var(--background-color);
}
div {
height: 100px;
width: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
Yellow background color box.
</div>
<div class="container">
<div class="box">
Blue background color box.
</div>
</div>
</body>
</html>
CSS 自定义属性 - ：root
以下示例演示如何使用 ：root 选择器设置自定义属性。：root 选择器尽可能高地匹配 -
<html>
<head>
<style>
:root {
--yellow: yellow;
}
.box {
background-color: var(--yellow);
}
</style>
</head>
<body>
<div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>
CSS 自定义属性 - 与 ！important 结合使用
以下示例演示了将 ！important 应用于 --background-color 变量时，很难覆盖 --background-color 变量的值 -
<html>
<head>
<style>
.box {
--background-color: yellow !important;
background-color: var(--background-color);
--text: red;
color: var(--text);
}
</style>
</head>
<body>
<div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>
CSS 自定义属性 - 回退
以下示例演示了按钮上的缩放变换效果。比例因子是使用 --scale 自定义属性指定的。如果未定义 --scale，则刻度设置为 1.2 −
<html>
<head>
<style>
button {
transform: scale(var(--scale, 1.2));
padding: 10px;
background-color: yellow;
margin: 5px;
}
button:hover {
--scale: scale(0.8);
}
</style>
</head>
<body>
<button>
Hover Me
</button>
</body>
</html>
CSS 自定义属性 - @property
以下示例演示如何使用@property规则来定义自定义属性 --gradient-color，其初始值为 pink 和过渡效果。当您将鼠标悬停在框上时，渐变颜色会变为绿色 -
<html>
<head>
<style>
@property --gradient-color {
initial-value: pink;
inherits: false;
}
.box {
width: 150px;
height: 150px;
--gradient-color: pink;
background: linear-gradient(var(--gradient-color), yellow);
transition: --gradient-color 1s;
}
.box:hover {
--gradient-color: green;
}
</style>
</head>
<body>
<div class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>
