html - safari 中的背景属性 CSS3

Question

我想让下面的代码在 safari 中工作，但它不 :(

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%);