如何將背景線性漸變添加到 iOS Safari、Mac Safari、Edge 和 IE11？

Question

我們正在嘗試使用background: linear-gradient()來獲得以下 output。 但是，我們遇到了一個問題，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 中不支持雙 position 色標。

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;