Safari的CSS径向渐变无法正常工作

Question

当我在Chrome，IE和Firefox上使用此代码段时，它运行正常！但是在Safari上它不起作用。

发生此问题：

＆＃13;

＆＃13;

.circle-red {
	border: 2px solid;
	border-radius: 51%;
	width: 40px;
	height: 40px;
	background: radial-gradient(ellipse at 80px 40px, rgba(255, 255, 255, 0.75) 10%, rgba(255,255,255,0.5) 32%, rgba(255,255,255,0) 70% ), linear-gradient(160deg, transparent 10%, red 30%);
	background-size: 87.5% 55%, 100% 100%;
	background-repeat: no-repeat;
}

＆＃13;

<div class="circle-red"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试在background-size属性和背景渐变值上添加webkit前缀。这是一个例子：

.circle-red {
    border: 2px solid;
    border-radius: 51%;
    width: 40px;
    height: 40px;
    background: radial-gradient(ellipse at 80px 40px, rgba(255, 255, 255, 0.75) 10%, rgba(255,255,255,0.5) 32%, rgba(255,255,255,0) 70% ), linear-gradient(160deg, transparent 10%, red 30%);
   background: -webkit-radial-gradient(ellipse at 80px 40px, rgba(255, 255, 255, 0.75) 10%, rgba(255,255,255,0.5) 32%, rgba(255,255,255,0) 70% ), linear-gradient(160deg, transparent 10%, red 30%);
    background-size: 87.5% 55%, 100% 100%;
-webkit-background-size: 87.5% 55%, 100% 100%;
    background-repeat: no-repeat;
}