Question

请问有什么方法可以像这样使用CSS制作渐变背景

Answer 1

你可以试试这段代码使用此链接 http://www.colorzilla.com/gradient-editor/

background: #1e5799; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #1e5799 0%, #2989d8 96%,     #207cca 100%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-        stop(0%,#1e5799), color-stop(96%,#2989d8), color-stop(100%,#207cca), color-  stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #1e5799 0%,#2989d8   96%,#207cca 100%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #1e5799 0%,#2989d8 96%,#207cca 100%,#7db9e8 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #1e5799 0%,#2989d8 96%,#207cca 100%,#7db9e8 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  #1e5799 0%,#2989d8 96%,#207cca 100%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799',   endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

Answer 2

我认为这是一个径向渐变。查看此更新的小提琴：http://jsfiddle.net/dimboiu/8ptr2/2/（latest source / source）

#radial-center {
  width:500px;
  height:500px;
  display:block;
  /* fallback */
  background-color: #2F2727;
  background-image: url('');
  background-position: center top;
  background-repeat: no-repeat;

  background-image: radial-gradient(center top, ellipse cover, #ffeda3, #ffc800);
  background-image: -o-radial-gradient(center top, ellipse cover, #ffeda3, #ffc800);
  background-image: -ms-radial-gradient(center top, ellipse cover, #ffeda3, #ffc800);
  background-image: -moz-radial-gradient(center top, ellipse cover, #ffeda3, #ffc800);
  background-image: -webkit-radial-gradient(center top, ellipse cover, #ffeda3, #ffc800);
}

CSS渐变背景

2 个答案: