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

Safari中的背景属性CSS3

1 个答案: