CSS 中的多个完美圆 [英] Multiple perfect circles in CSS

问题描述

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

I am trying to make a simple shape in css that has 6 circles inside a rectangle. No problem with the basic shape except that my circles edges are not very smooth. Can anyone help with this as it looks a bit 8bit gamer at the moment

http://bootply.com/98298

推荐答案

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

You have a slight mistake in the syntax, the color stops should state increasing percentages.

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

The browser handles 2 stops of 95% - 10% as 95% - 95%; the 10% is not valid.

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

You can get a non pixelated edge by setting a little zone for the transition, say from 95% to 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% 之间进行更平滑的变化.

The first case makes a sharp change at 95%; the later makes a smoother change between 95% and 97%.

无论如何请注意，当您想要急剧过渡时，有时会使用您使用的语法以某种方式指示低于前一个停止点".

Note anyway that the syntax that you used is sometimes used, when you want a sharp transition, to somehow indicate "lower than the preceding stop".

这篇关于CSS 中的多个完美圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！