3

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

喜欢这里： http: //malsup.com/jquery/corner/

卷发设置

4

3 回答 3

7

这可以通过在正常背景图像之上添加四个圆形“渐变”背景图像来完成，每个都位于适当的角落。Lea Verou 的博客上有一个例子。从中我提取了一个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;
}
于 2013-08-29T18:24:18.250 回答
1

不，据我所知，没有办法用纯 CSS 做到这一点。使用 JavaScript 或 jQuery 来做这件事甚至都不简单。

据我所知，您链接的 jQuery 插件是最适合您的插件，特别是因为您想要一个跨浏览器解决方案，高级 CSS3 尚不存在，它是您应该使用的。

于 2013-08-29T18:25:29.207 回答
1

使用纯 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>

这是一个例子：

于 2013-08-29T21:56:43.363 回答