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