CSS中,我们可以使用border-radius属性来设置圆角边框,可是如何在边框中添加背景图片呢?
这时候就需要用到另一个属性:background-clip。这个属性定义背景的绘制区域,它有三个值:
background-clip: border-box; /* 背景从边框外缘开始绘制 */ background-clip: padding-box; /* 背景从内边距开始绘制 */ background-clip: content-box; /* 背景从内容框(不包括内边距)开始绘制 */
我们可以设置background-clip的值为padding-box,使背景从内边距开始绘制,这样就能让背景图片和圆角边框完美结合。
div { width: 200px; height: 100px; border-radius: 10px; border: 4px solid #ccc; background-image: url(bg.png); background-clip: padding-box; }
在上面的代码中,我们给一个div元素添加了圆角边框和背景图片,同时设置background-clip为padding-box,这样背景图片就会从内边距开始绘制,达到了我们想要的效果。