Safari中的背景属性CSS3

Question

我希望以下代码在野生动物园工作，但它不是:(

background: 
 linear-gradient(75deg,transparent 50%, grey 50%, transparent 54%) no-repeat 36.5% 0,
 linear-gradient(-75deg,transparent 50%, grey 50%, transparent 54%) no-repeat 63.5% 0,
 radial-gradient(rgba(127,127,127,0) 49%, rgba(255,255,255,.7) 51%, #c9c9c9 52%);

在Chrome和Firefox中，它似乎工作正常，但在Safari中却不能。 我已经尝试过webkit及其它，但这只会使情况更糟。

有任何想法吗？

类：

.part a {
width: 200%; height: 200%;
border-radius: 50%;
box-shadow: 0 0 3px dimgrey, inset 0 0 4px white;
transform: skewY(-60deg) rotate(-15deg);
-ms-transform: skewY(-60deg) rotate(-15deg);
    -webkit-transform: skewY(-60deg) rotate(-15deg); 

    background: linear-gradient(75deg,transparent 50%, grey 50%, transparent 54%) no-      
    repeat 36.5% 0,
    linear-gradient(-75deg,transparent 50%, grey 50%, transparent 54%) no-repeat 63.5% 
    0, radial-gradient(rgba(127,127,127,0) 49%, rgba(255,255,255,.7) 51%, #c9c9c9 52%);

background-size: 15% 15%, 15% 15%, cover;
line-height: 4;
}

Answer 1

当前和较旧的Safari版本不完全支持您的当前示例。

您将需要添加-webkit-属性以支持5.1和6。

参见http://caniuse.com/css-gradients

改用它。

background: -webkit-linear-gradient(75deg,transparent 50%, grey 50%, transparent 54%) no-repeat 36.5% 0, -webkit-linear-gradient(-75deg,transparent 50%, grey 50%, transparent 54%) no-repeat 63.5% 0, radial-gradient(rgba(127,127,127,0) 49%, rgba(255,255,255,.7) 51%, #c9c9c9 52%);
background: linear-gradient(75deg,transparent 50%, grey 50%, transparent 54%) no-repeat 36.5% 0, linear-gradient(-75deg,transparent 50%, grey 50%, transparent 54%) no-repeat 63.5% 0, radial-gradient(rgba(127,127,127,0) 49%, rgba(255,255,255,.7) 51%, #c9c9c9 52%);