css 背景图片有圆角吗

问：CSS 背景图片有圆角吗？

答：CSS 背景图片本身是没有圆角的属性，但是可以借助 CSS3 的属性来实现背景图片的圆角。具体的做法为：

1. 使用 border-radius 属性来设置圆角。

例如：

div { background-image: url("bg.jpg"); border-radius: 10px; }

2. 利用伪元素 ::before 或 ::after 来创建一个带圆角的矩形，再将背景设置到这个矩形中。

例如：

div::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("bg.jpg"); border-radius: 10px; }

需要注意的是，使用 border-radius 属性时，应保证其对应所在元素的尺寸和背景图片的尺寸一致，否则可能会出现拉伸或缩放不符合预期的情况。

例如：

html,body,div { width: 100%; height: 100%; margin: 0; padding: 0; } div { background-image: url("bg.jpg"); background-size: cover; /* 图片等比缩放填充整个元素 */ border-radius: 10px; }

这样便可以在原有的背景图片上实现圆角效果了。