CSS:如何在框内倒圆角? [英] CSS: How to round box corners inside?

问题描述

具有border-radius属性可将框角变圆.但是如何在块内圆角化，例如减去圆?

There're border-radius property to round box corners. But how to round corners inside block, like subtracting circle?

例如此处: http://malsup.com/jquery/corner/

卷曲设置

推荐答案

这可以通过在常规背景图像的顶部添加四个圆形渐变"背景图像来完成，每个背景图像都位于适当的角上. Lea Verou的博客上有一个示例/a>.从中我提取了 JSFiddle ；关键代码是

This can be done by adding four circular "gradient" background images on top of the normal background image, each positioned at the appropriate corner. There's an example on Lea Verou's blog. From that I've extracted a JSFiddle; the key code is

.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;
}

这篇关于CSS:如何在框内倒圆角?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！