Question

圆角框有border-radius属性。但是如何在块内圆角，比如减去圆圈？

卷曲设置

Answer 1

这可以通过在正常背景图像的顶部添加四个圆形“渐变”背景图像来完成，每个背景图像位于适当的角落。有一个例子on Lea Verou's blog。从那以后我提取了JSFiddle;关键代码是

.round {
    background:
        radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px);

    background-position: bottom left, bottom right, top right, top left;
    background-size: 50% 50%;
    background-repeat: no-repeat;

    padding: 14px;
}

Answer 2

不，据我所知，没有办法用纯CSS做到这一点。使用JavaScript或jQuery做起来并不简单。

据我所知，您链接的jQuery插件是最适合您的插件，特别是因为您需要一个跨浏览器的解决方案，而高级CSS3还没有，并且它是您应该使用的

Answer 3

使用纯CSS有一种方法：

CSS代码：

div {
height: 200px;
background: red;
position: relative;
width:200px;
}

div:after {
content: '';
position: absolute;
top: -20px; right: -20px;
border-top: 50px solid white;
border-left: 50px solid white;
width: 0;
background:#fff;
    border-radius:100px;

}
div:before {
content: '';
position: absolute;
top: -20px; left: -20px;
border-top: 50px solid white;
border-left: 50px solid white;
width: 0;
background:#fff;
    border-radius:100px;

}

HTML： <div></div>

Here is an example:

CSS：如何在内部圆角？

3 个答案: