我正在尝试为div框创建放射状渐变光泽效果，但我不确定这样做的最佳方法是什么。我没有发现实现我想要实现的目标的资源；只是光泽会影响看起来像叠加的效果。
我发现的大多数示例看起来都是这样的http://jsfiddle.net/nqQc7/512/。
下面，我显示了我要创建的内容。
#shine-div {
height: 30vh;
width: 60vw;
margin-right: auto;
margin-left: auto;
border-radius: 10px;
/*background: radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%);*/
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
animation: colorChange 5s infinite;
}
@keyframes colorChange {
0% {
background: radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%)
}
50% {
background: radial-gradient(ellipse farthest-corner at top, #FFFFFF 0%, #ffb3ff …
我创建了某种功能“深度”嵌套数组过滤功能。此功能显示汽车，并为其分配了颜色“红色”。但是，“通过”过滤器的汽车是仅分配了1种颜色的汽车。
如何确保条件检查阵列中的阵列？我是否需要在循环内创建循环？理想的结果是，如果将标准设置为“红色”，由于这些汽车也具有此颜色，因此还将显示BMW和SUZUKI。
由于我自己找不到任何非常有用的东西，因此对获得任何帮助，建议或与其他职位的进一步链接以取得理想的结果将不胜感激。帖子，
在下面，我附上了当前代码的代码片段。
const myCars = [
{ name: "BMW",colour: ["White","Red","Black"] },
{ name: "AUDI",colour: ["Yellow","Silver"] },
{ name: "VW",colour: ["Purple","Gold"] },
{ name: "NISSAN",colour: ["White","Black"] },
{ name: "SUZUKI",colour: ["Red"] },
];
for (x in myCars) {
var keys = Object.keys(myCars[x])
var carSpec = myCars.filter(function(fltr) {
return (fltr.colour == "Red");
});
document.getElementById("show1").innerHTML += carSpec[x].name + " " + "has these colours - " + carSpec[x].colour + "<hr />";
}<p>Car List.</p>
<p id="show"></p>
<p id="show1"></p>