前端之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;
	}
}

但是由于这是一个 css 属性，是可以参与渲染过程的，所以用动画改变这个属性值的时候就会生效
目前这个写法兼容性未知，有兴趣的可以测一下兼容性，不要盲目上生产环境
如果大部分浏览器支持的话，那么以前很多不可想象的东西，我们都能做了