css - 使用 CSS 从 div 中切出多个圆圈

Question

我需要在 html + css 中实现以下(减去顶部的字形):

现在，我坚持

background-image: -webkit-radial-gradient(0px 45px, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 13px, gray 14px);  

( http://jsfiddle.net/F7K4S/ )，这似乎是朝着错误的方向前进，因为我无法添加第二个半圆。

Answer 1

好吧，您已经使用伪元素给出了一个很好的答案。

如果你想保留使用径向渐变背景的想法，答案就是这个

.cutout {
    height: 88px;
    width: 88px;

    /* the inverse circle "cut" */
    background-image: 
        radial-gradient(circle at 44px 0px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 13px, blue 14px),
        radial-gradient(circle at 0 24px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 13px, red 14px),
        radial-gradient(circle at 44px 24px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 13px, green 14px),
        radial-gradient(circle at 44px 20px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 13px, blue 14px);
    background-size: 88px 20px, 44px 48px, 44px 48px, 88px 20px;
    background-position: 0px 0px, 0px 20px, 44px 20px, 0px 68px;
    background-repeat: no-repeat;
}

fiddle

我设置了不同的颜色，这样很容易看出什么是什么。

此外，我已将您的表示法升级为符合 w3c，它在现代浏览器中得到很好的支持。