1. 首页
  2. CSS 菜鸟教程
  3. CSS - 自定义属性

CSS - 自定义属性

自定义属性使用以 --- 开头的名称，例如 --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>
<< CSS - 特异性 CSS - 响应式网页设计 （RWD） >>