Question

我有一个小方块支架的东西正在进行中。它适用于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

Answer 2

好的，所以它适用于最新的Safari浏览器。我可以加载到我的电脑上的最新Safari很古老。我没有意识到苹果公司不再为Windows提供更新的版本!!

CSS border-image：线性渐变在Safari中不起作用

2 个答案: