Multiple perfect circles in CSS

问题

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

回答1:

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

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

You can get a non pixelated edge by setting a little zone for the transition, say from 95% to 97%

your code

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

more correct code

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

or

    background-image: radial-gradient(closest-side, transparent 95%, #ECF0F1 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".

来源：https://stackoverflow.com/questions/20360750/multiple-perfect-circles-in-css