先看下效果是个动态gif图,注意观察:态
看到了吧。圆圈div 边框颜色在不停的自动变色。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Main</title><style rel="stylesheet">#showMenu{width: 500px;height: 400px;margin: auto;border: 8px solid;border-image: linear-gradient(45deg, gold, deeppink) 1;clip-path: inset(0px round 10px);animation: huerotate 6s infinite linear;filter: hue-rotate(360deg);}@keyframes huerotate {0% {filter: hue-rotate(0deg);}100% {filter: hue-rorate(360deg);}}#showMenu ul li{padding: 5px;list-style: none;}/* border: 2px solid cadetblue;*//* border-image: linear-gradient(to right, #8f41e9, #578aef) 3;*//* border-radius: 12px;*//* width: 500px;*//* height: 500px;*//* margin: auto;*//*}*/</style></head><body><div id="showMenu"><h1>OK,RUNING!</h1><ul><li><a href="sensordata.html">1. 查看实时数据</a></li><li><a href="setOffLineData.html">2. 离线数据设置</a></li></ul></div></body></html>