前端之 css 自定义属性

做一个流动的边框演示

html就一个div


<div class="box1"></div>

css设置个渐变背景


.box1::after {
	content: '';
	position: absolute;
	inset: 8px;
	background: #eee;
	border-radius: inherit;
}
.box1 {
	position: relative;
	height: 300px;
	width: 500px;
	margin: 0 auto;
	border-radius: 5px;
	background: linear-gradient(0deg,#4ddcff,#2c67e3 54%,#5e00c2);
}

这时有人就要说了，你这个怎么不动啊
那么怎么才能动起来呢
先加个动画试试


.box {
	position: relative;
	height: 300px;
	width: 500px;
	margin: 0 auto;
	border-radius: 5px;
	background: linear-gradient(0deg,#4ddcff,#2c67e3 54%,#5e00c2);
	animation: border 3s linear infinite;
}
@keyframes border {
	to {
		background: linear-gradient(360deg,#4ddcff,#2c67e3 54%,#5e00c2);
	}
}

试完以后会发现不管用，那么用上篇里的css变量有没有用呢


.box {
    --dec:0deg;
	position: relative;
	height: 300px;
	width: 500px;
	margin: 0 auto;
	border-radius: 5px;
	background: linear-gradient(var(--dec),#4ddcff,#2c67e3 54%,#5e00c2);
	animation: border 3s linear infinite;
}
@keyframes border {
	to {
		--dec:360deg;
	}
}

还是不管用
根本原因是因为浏览器渲染这个背景的时候，是不受开发者干预的
但是，css有个houdini api，那么这个api是干什么的呢
简单点说就是开放 CSS 的底层 API 给开发者，使得开发者可以通过这套接口自行扩展 CSS，并提供相应的工具允许开发者介入浏览器渲染引擎的样式和布局流程中
ok，给大家演示一下
先自定义一个css属性


@property --dir {
	syntax: '<angle>';  //接收值  lenght color 等
  	initial-value: 0deg;  //默认值
	inherits: false;//  是否能被继承
}

用的时候和css变量一样


.box {
    --dir:0deg;
	position: relative;
	height: 300px;
	width: 500px;
	margin: 0 auto;
	border-radius: 5px;
	background: linear-gradient(var(--dir),#4ddcff,#2c67e3 54%,#5e00c2);
	animation: border 3s linear infinite;
}
@keyframes border {
	to {
		--dir:360deg;
	}
}