Safari的CSS径向渐变不起作用答案

【问题标题】：CSS radial gradient for Safari not workingSafari的CSS径向渐变不起作用
【发布时间】：2016-02-03 03:02:55
【问题描述】：

当我在 Chrome、IE 和 Firefox 上使用这个 sn-p 时，它工作正常！但在 Safari 上它不起作用。

出现此问题：

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

&lt;div class="circle-red"&gt;&lt;/div&gt;

【问题讨论】：

您使用的是哪个版本的 Safari？它可能仍然需要 -webkit- 前缀
@TylerH 我使用的是 5.1.7 版
@TylerH 如何使用这个前缀？

标签： css safari cross-browser css-gradients

【解决方案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;
}

【讨论】：

感谢没有ellipse 属性的炒锅。