Question

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

Answer 1

语法上有轻微错误，颜色停止应该表示增加百分比。

浏览器处理2个95％的停止 - 10％为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％之间变得更平滑。

请注意，无论如何，当您想要进行急剧转换时，有时会使用您使用的语法，以某种方式表示“低于前一个停止”。

CSS中的多个完美圆圈

1 个答案: