问题描述
我使用圆形边框（border-radius）对输入字段进行样式设置，并尝试向该边框添加渐变。我可以成功地使梯度和圆形的边框，但不能一起工作。
I'm styling an input field which has a rounded border (border-radius), and attempting to add a gradient to said border. I can successfully make the gradient and the rounded border, however neither work together. It's either rounded with no gradient, or a border with a gradient, but no rounded corners.
-webkit-border-radius: 5px;
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0bbc4), to(#ced9de)) 1 100%;
是否还有两个CSS属性协同工作，或者这不可能？
Is there anyway to have both CSS properties work together, or is this not possible?
推荐答案
根据W3C规范，可能不可能：
Probably not possible, as per the W3C spec:
这可能是因为 border-image 可能需要一些复杂的模式。如果您想要一个圆角，图像边框，您需要自己创建一个。
This is likely because border-image can take some potentially complicated patterns. If you want a rounded, image border, you'll need to create one yourself.
这篇关于可以使用border-radius和具有渐变的边框图像吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！