Is it possible to create this background effect using CSS3 and Compass?

问题

I'm working to apply a comp provided by our designer to a website.

The effect I need to create for the background is the folowing:

It has a radial in the centre AND a gradient from top to bottom

Is it possible to create this effect on one element using CSS3 and Compass or would I have to build it using two layers?

Can you recommend a better way of creating the same effect?

Thanks!

回答1:

If it is possible with pure CSS, it is possible with Sass/Compass. In fact, it wouldn't look a whole lot different than how you would write it with pure CSS:

.foo {
  @include background(radial-gradient(blue, transparent 10em), linear-gradient(black, white));
}

You'll need to adjust the radial-gradient to match your image, of course, but it can be done.

来源：https://stackoverflow.com/questions/17189821/is-it-possible-to-create-this-background-effect-using-css3-and-compass