如何使用css从中心创建两种颜色的渐变效果？

Question

在excel中，我使用加号创建了这个效果。 我一直在寻找用CSS创建这个，但我没有接近！ 我怎样才能做到这一点？有没有很好的网站教会如何使用渐变？

此致 埃利奥·费尔南德斯

Answer 1

使用CSS，您可以访问Radial Gradient，类似，但不能使用Excel输出。

＆＃13;

＆＃13;

#grad1 {
  height: 150px;
  width: 200px;
  background: red;
  /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%);
  /* Safari 5.1-6.0 */
  background: -o-radial-gradient(red 5%, yellow 15%, green 60%);
  /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(red 5%, yellow 15%, green 60%);
  /* For Firefox 3.6 to 15 */
  background: radial-gradient(red 5%, yellow 15%, green 60%);
  /* Standard syntax (must be last) */
}

＆＃13;

<div id="grad1"></div>

＆＃13;

＆＃13;

＆＃13;

注意：Internet Explorer 9及更早版本不支持渐变。

Answer 2

如果你想达到这种特殊效果，使用CSS渐变可能不是一种可行的方法，因为它非常复杂。

你可以试试这个：

＆＃13;

＆＃13;

.gradient {
  width: 60px;
  height: 60px;
  background: radial-gradient(#fff, #000)
}

＆＃13;

<div class="gradient"></div>

＆＃13;

＆＃13;

＆＃13;

以下是一些CSS引用：

• CSS Gradients
• MDN - CSS Gradients