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

Question

我们正在尝试使用 background: linear-gradient() 来获得以下输出。但是，我们 运行 遇到了 css 未应用于以下浏览器的问题。

问题：

我们如何让它在所有浏览器上运行？

浏览器有问题

• Mac High Sierra Safari 11.1
• IE11
• 微软边缘 44.17763.771.0
• Safari 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;