Front-end CSS Custom Properties

Demonstrate this flowing border effect

This border effect is actually very simple

html is just a div
<div class="box1"></div>

css sets a gradient background

.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);
}

The effect is like this

Someone might say, why doesn't it move? So how can we make it move? Let's try adding an animation first

.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);
	}
}

After trying, we find that it doesn't work, so does the CSS variable in the previous article work?

.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;
	}
}

Still doesn't work
The root cause is that when the browser renders this background, it is not affected by the developer's intervention
However, CSS has a Houdini API, so what is this API for?
Simply put, it opens up the underlying API of CSS to developers, allowing developers to extend CSS through this set of interfaces and provide corresponding tools to allow developers to intervene in the browser's rendering engine's style and layout process
Okay, let me demonstrate it to you
First, customize a CSS property

@property --dir {
	syntax: '<angle>';  //accepts values like length, color, etc.
  	initial-value: 0deg;  //default value
	inherits: false;  //whether it can be inherited
}

Use it just like CSS variables when needed

.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;
	}
}

But because this is a CSS property, it can participate in the rendering process, so when you use an animation to change the value of this property, it will take effect
The compatibility of this writing method is currently unknown. If you are interested, you can test the compatibility. Do not blindly use it in a production environment
If most browsers support it, then many unimaginable things in the past can now be done.