CSS 边框图像 :linear-gradient not working in Safari

Question

我有一些关于 CSS 方括号的事情。它在 Chrome、Firefox 和 IE 中运行良好，但在 Safari 中却不行!

.square-brackets {
padding: 10px 30px;
margin: auto;
border: 5px solid transparent;
border-image:linear-gradient(to right, #92AC3B 0px,#92AC3B 3%, #fff 3%, #fff 98%, #92AC3B 98%, #92AC3B 100%);
border-image: -webkit-linear-gradient(to right, #92AC3B 0px,#92AC3B 3%, #fff 3%, #fff 98%, #92AC3B 98%, #92AC3B 100%); /* Chrome10+,Safari5.1+ */
border-image-slice: 1;
}

有谁知道可能导致它无法在 Safari 中呈现的原因吗？

Answer 1

您需要使用它来实现向后兼容性:

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.7))); 

基本上，您需要同时使用 -webkit-gradient 和 -webkit--linear-gradient。您可以在此处找到有关渐变前缀的更多信息:https://github.com/CSSLint/csslint/wiki/Require-all-gradient-definitions