[英]Border-image, border-radius
Im having trouble with a div with rounded corners and border image. 我在使用圆角和边框图像的div时遇到麻烦。 The border image stays square and the div has rounded corners. 边框图像保持正方形,并且div具有圆角。 What i need is the image border to work with the rounded corners from border radius. 我需要的是图像边框,以使用边框半径的圆角。
-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%;
It is not possible to have image in the place of border-radius 无法在边界半径处显示图像
A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by 'background-clip'). 框的背景而不是其边框图像被裁剪为适当的曲线(由“ background-clip”确定)。 Other effects that clip to the border or padding edge (such as 'overflow' other than 'visible') also must clip to the curve. 剪切到边框或填充边缘的其他效果(例如“可见”以外的“溢出”)也必须剪切到曲线。 The content of replaced elements is always trimmed to the content edge curve. 替换元素的内容始终会修剪到内容边缘曲线。 Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element. 同样,边界边缘曲线之外的区域也不接受代表该元素的鼠标事件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.