CSS中的多个完美圆圈

【问题标题】：Multiple perfect circles in CSSCSS中的多个完美圆圈
【发布时间】：2013-12-20 01:50:33
【问题描述】：

我正在尝试在 css 中制作一个在矩形内有 6 个圆圈的简单形状。基本形状没有问题，只是我的圆圈边缘不是很光滑。任何人都可以帮助解决这个问题，因为它目前看起来有点 8 位游戏玩家

http://bootply.com/98298

【问题讨论】：

对圆圈使用单个元素、框阴影或图像。径向梯度目前不那么可靠
您的语法有误，颜色停止状态增加百分比。浏览器将 95% - 10% 的 2 个停靠点处理为 95% - 95%； 10% 无效。您可以通过为过渡设置一个小区域来获得非像素化边缘，例如从 95% 到 97%
@vals 完美，谢谢。如果您将此添加为答案而不是评论，我会将其标记为答案
我们去..快乐编码！

标签： css twitter-bootstrap-3

【解决方案1】：

您在语法上有一个小错误，颜色停止应该说明增加的百分比。

浏览器将 95% - 10% 的 2 档处理为 95% - 95%； 10% 无效。

您可以通过为过渡设置一个小区域来获得非像素化边缘，例如从 95% 到 97%

你的代码

.panel {
    background-color: #E67E22;
    border-color: #E67E22;
    color: #ffffff;
    padding: 10px;
    background-image: radial-gradient(closest-side, transparent 95%, #ECF0F1 10%);
    background-size: 34% 50%;
    min-height: 100px;
}

更正确的代码

    background-image: radial-gradient(closest-side, transparent 95%, #ECF0F1 95%);

或

    background-image: radial-gradient(closest-side, transparent 95%, #ECF0F1 97%);

第一种情况在 95% 处发生急剧变化；后者在 95% 和 97% 之间进行更平滑的变化。

请注意，您使用的语法有时会在您想要急剧过渡时以某种方式指示“低于前一个停止点”。

【讨论】：