使用CSS插入圆角边缘

从我的谷歌搜索，我无法找到任何有用的。

2014-04-01 JacobTheDev

它可以用CSS3的径向梯度完成：

enter image description here

CSS：

div{ 
    background: 
    radial-gradient(
     circle at -40px 50px, 
     transparent 80px, 
     red 80px 
    ); 
    height: 100px; 
    width: 100px; 
} 
body { background-color: blue; }

http://jsfiddle.net/7WHAz/2/

来源

2014-04-01 14:43:53

确实比我的解决方案好得多。但它不适用于旧浏览器。如果瞄准所有浏览器，我会使用一个图像，可悲的是，我的客户请求。 –

@AlvaroMenéndez好点。 [浏览器支持]（http://caniuse.com/css-gradients）在78％下体面，在大多数浏览器中工作，除了像往常一样的IE浏览器。 –

非常有趣。希望我早点见过它。一定会用于未来的项目。 – JacobTheDev

这可能工作......但如果只是一个普通的背景颜色恐怕：

http://jsfiddle.net/7WHAz/

变化：

div:before {   
    background-color:white; 
}

的颜色你的背景使用

来源

2014-04-01 14:21:39

可悲的是，我需要它在对图像的工作。很好的答案，我只需要使用图像。 – JacobTheDev

使用图像没有问题...只需在图像的左侧添加图像即可保存整个图像作为容器。在这个例子中，PNG大小只有3kb：http://jsfiddle.net/7WHAz/1/ –

@Rev我的答案可以用于任何背景。 –

使用CSS插入圆角边缘

回答

相关问题