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

Question

We are attempting to use background: linear-gradient() to get the following output. However, we are running into a problem where the css is not being applied to the following browsers.

Question:

How can we get it to work on all browsers?

Browsers with issues

• Mac High Sierra Safari 11.1
• IE11
• Microsoft Edge 44.17763.771.0
• Safari on iOS (v12)

What we tried

 .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

Double position color stops are not supported in IE/Edge and Safari < v13.

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

Simply change your code as such:

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;