铬的边界渐变

Question

您发送了在mozilla中运行的代码边框渐变。但它不适用于webkit浏览器。你能告诉我在webkit浏览器中可以运行的边界渐变代码吗？

Answer 1

边框图像的渐变目前在-webkit中无法正常工作。事实上，只有通过border-image快捷语法支持的基本边框图像才能在Webkit浏览器中使用。你需要使用嵌套的div来一起破解。

Answer 2

您可以考虑使用父div和您想要边框的宽度填充，然后将父div的背景设置为：

-webkit-gradient(linear, left top, left bottom, from(white), to(black));

Answer 3

您不必这样做：

-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;

将为您完成这项工作。查看http://jsfiddle.net/MWaTw/了解更多示例