Как добавить фоновый линейный градиент в iOS Safari, Mac Safari, Edge и IE11?

Question

Мы пытаемся использовать background: linear-gradient(), чтобы получить следующий вывод. Однако мы сталкиваемся с проблемой, когда CSS не применяется к следующим браузерам.

Вопрос:

Как заставить его работать во всех браузерах?

Браузеры с проблемами

• Mac High Sierra Safari 11.1
• IE11
• Microsoft Edge 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

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;