如何向iOS Safari、Mac、Edge和IE11添加背景线性梯度？

Question

我们正在尝试使用background: linear-gradient()获得以下输出。但是，我们遇到了一个问题，即css没有应用于以下浏览器。

问题：

我们怎样才能让它在所有浏览器上工作？

带有问题的浏览器

11.1

• IE11

• Microsoft 44.17763.771.0

• Safari on iOS (v12)

我们试过什么

​

.box { 
  padding:20px;
  display:inline-block;
  border-right:2px solid #000;
  border-left:2px solid #000;
  background:
    linear-gradient(to left ,#000 10px,transparent 10px 30px,#000 0) top,
    linear-gradient(to right,#000 10px,transparent 10px 30px,#000 0) bottom;
  background-size:100% 2px;
  background-repeat:no-repeat;
}

<div class="box">
Some text inside
</div>

​

Answer 1

IE/Edge和Safari < v13不支持双位置颜色停止。

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

只需将代码更改如下：

background:
    linear-gradient(to left ,#000 10px,transparent 10px, transparent 30px, #000 0) top,
    linear-gradient(to right,#000 10px,transparent 10px, transparent 30px, #000 0) bottom;