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

问题描述

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

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

有人可以帮忙吗?

解决方法

尝试如下添加-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,.2),.05) 1px,transparent);
    background: -webkit-linear-gradient(to top,.05) 
    1px,transparent);  
    height: 25px;
    
}
.inner {
    height: 25px;    
    background: linear-gradient(90deg,rgba(255,255,1) 0%,rgba(9,9,121,0) 
    15%,rgba(156,156,201,0) 80%,1) 100%);
    background: -webkit-linear-gradient(to top,transparent);
}