CSS:如何在内部圆角？

Question

这里是border-radius属性圆盒子的角落.但是如何在块内圆角,比如减去圆圈？

像这里:http://malsup.com/jquery/corner/

卷曲设置

Answer 1

这可以通过在正常背景图像的顶部添加四个圆形"渐变"背景图像来完成,每个背景图像位于适当的角落.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;
}