and*_*ick 6 css gradient linear-gradients css3
与此相关的任何其他问题都有答案给出OLD webkit语法,而不是新语法,或者它们没有解释如何仅将边界渐变应用于一侧.
哪些浏览器通过CSS支持渐变边框而无需使用图像？
我在下面的JsFiddle有一个例子,它显示了一个仅应用于右边框的渐变,我如何使这个跨浏览器兼容当前支持CSS边框渐变的所有浏览器？我相信我的示例中的Gradient语法是webkit使用的旧语法,他们在大约一年前更新了语法我认为,我想使用新语法但我每次尝试都失败了.我不明白语法中是什么告诉渐变只应用于右侧,我试着调整数字,但我只是不明白它在做什么.非常感谢.
http://jsfiddle.net/nicktheandroid/MNax7/1/
另外,我在下面有另一个例子,它使用了所有浏览器都使用的新的CSS渐变语法,但渐变应用于所有边框,我希望它仅应用于右边框,就像上面的例子一样.
您需要在代码中使用与边框粗细相关的值:
0 100% 0 0/0 15px 0 0 stretch;
前四个数字是四个边框(顶部,右侧,底部,左侧)的渐变激活,因此右边框设置为100%而其他边框已停用.
/后面的四个数字是边框的宽度,显然顶部,底部和左边都设置为0宽度,右边是15px.
拉伸选项告诉渐变拉伸边框长度的整个路径,另一个选项是圆形,但这更多地用于实际图像(image.jpg)来决定是重复图像还是拉伸它.我不知道是否还有更多的选择..
这是一个更新的演示,使用您的新语法,只激活了正确的边框.
| 归档时间： |
|
| 查看次数： |
2758 次 |
| 最近记录： |