Question

我希望仅使用css重新创建一个链接here的背景，我确定它可能但我在制作CSS3时非常糟糕我

如果可能的话，它应该适用于所有现代浏览器，而不是过于讨论＆lt; IE8支持。

感谢任何帮助。

Answer 1

background: #1e5799; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjN2RiOWU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover,  #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #1e5799 0%,#7db9e8 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #1e5799 0%,#7db9e8 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  #1e5799 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */

由http://www.colorzilla.com/gradient-editor/生成

Answer 2

这是用于创建Circular Gradient。

的CSS

现在使用CSS3创建渐变非常简单。由于有许多工具可用。以下是一些生成gradiend代码的在线工具：

Colorzilla Gradients

Gradientoo

div{  
    width:250px;
    height: 250px;
     background-image: radial-gradient(center center, circle cover, #ffeda3, #ffc800);
    background-image: -o-radial-gradient(center center, circle cover, #ffeda3, #ffc800);
    background-image: -ms-radial-gradient(center center, circle cover, #ffeda3, #ffc800);
    background-image: -moz-radial-gradient(center center, circle cover, #ffeda3, #ffc800);
    background-image: -webkit-radial-gradient(center center, circle cover, #ffeda3, #ffc800);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffeda3', endColorstr='#ffc800',GradientType=1 ); 
}

这是Demo。 http://jsbin.com/wedubinu/1/

CSS3中的循环渐变

2 个答案: