如何向iOS Safari，Mac Safari，Edge和IE11添加背景线性渐变？

Question

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

问题：

我们如何使它在所有浏览器上都能使用？

有问题的浏览器

• Mac High Sierra Safari 11.1
• IE11
• Microsoft Edge 44.17763.771.0
• iOS上的Safari（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

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;