可以将边界半径与具有渐变的边界图像一起使用吗？

小编典典

css

我正在对具有圆形边框（边界半径）的输入字段进行样式设置，并尝试向该边框添加渐变。我可以成功制作渐变色和圆角边框，但是不能同时使用。它可以是不带渐变的圆角，也可以是带渐变但不带圆角的边界。

-webkit-border-radius: 5px;
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0bbc4), to(#ced9de)) 1 100%;

无论如何，两个CSS属性可以一起工作，还是不可能？

阅读 287

2020-05-16

共1个答案

小编典典

根据W3C规范，可能是不可能的：

框的背景而不是其边框图像被裁剪为适当的曲线 （由“ background-
clip”确定）。剪切到边框或填充边缘的其他效果（例如“可见”以外的“溢出”）也必须剪切到曲线。替换元素的内容始终会修剪到内容边缘曲线。同样，边界边缘曲线之外的区域也不接受代表该元素的鼠标事件。

这很可能是因为border-image可能采取一些潜在的复杂模式。如果您想要一个圆角的图像边框，则需要自己创建一个。

2020-05-16