前端之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 屬性，是可以參與渲染過程的，所以用動畫改變這個屬性值的時候就會生效
目前這個寫法兼容性未知，有興趣的可以測一下兼容性，不要盲目上生產環境
如果大部分瀏覽器支持的話，那麼以前很多不可想象的東西，我們都能做了