外部/内部线性渐变在Safari中不起作用

Question

每个浏览器都可以在CSS3 linear-gradient上正常运行，但Safari浏览器却无法正常工作。

https://codepen.io/tom93ovsss/pen/rNLrgBm

有人可以帮忙吗？

Answer 1

尝试如下添加-webkit-linear-gradient

.container {
  width: 100%;
  padding-top: 50px;
  text-align: center;
}
.outer {
    margin-top: 10px; margin-bottom: 10px; 
    background: linear-gradient(to top, rgba(0,0,0,.2), rgba(0,0,0,.05) 1px, 
    transparent);
    background: -webkit-linear-gradient(to top, rgba(0,0,0,.2), rgba(0,0,0,.05) 
    1px, transparent);  
    height: 25px;
    
}
.inner {
    height: 25px;    
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(9,9,121,0) 
    15%, rgba(156,156,201,0) 80%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(to top, rgba(0,0,0,.2), rgba(0,0,0,.05) 
    1px, transparent);
}