边界图像，边界半径

Question

我在使用圆角和边框图像的div时遇到麻烦。 边框图像保持正方形，并且div具有圆角。 我需要的是图像边框，以使用边框半径的圆角。

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border:2px solid;
-moz-border-image: url(neon---horizontal-hotness-wallpapers_18493_1920x12001.jpg) 2 1 2 2 round;
-webkit-border-image: url(neon---horizontal-hotness-wallpapers_18493_1920x12001.jpg) 2 1 2 2 round;
-o-border-image: url(neon---horizontal-hotness-wallpapers_18493_1920x12001.jpg) 2 1 2 2 round;
border-image: url(neon---horizontal-hotness-wallpapers_18493_1920x12001.jpg) 2 1 2 2 round;
width:100%;

Answer 1

必须指定border-style和border-width（不设置为none或0），border-image才能起作用。 它有一个错误，即边框图像错误地覆盖了边框样式。 此链接 1可能会有所帮助

Answer 2

无法在边界半径处显示图像

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