CSS颜色渐变

Question

我是如何使用CSS获得如此美观的色彩渐变？ 中间颜色是＃888888

用盒阴影插入

我没有运气。不好看。

Answer 1

你最好使用CSS3径向渐变而不是盒子阴影。

您可以使用colorzilla之类的工具为您创建CSS：

.gradient
{
  background: #999999; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover,  #999999 0%, #808080 48%, #747474 100%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#999999), color-stop(48%,#808080), color-stop(100%,#747474)); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover,  #999999 0%,#808080 48%,#747474 100%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover,  #999999 0%,#808080 48%,#747474 100%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover,  #999999 0%,#808080 48%,#747474 100%); /* IE10+ */
  background: radial-gradient(ellipse at center,  #999999 0%,#808080 48%,#747474 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#747474',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

http://f.cl.ly/items/3M1O262X2T151Z3F1R3w/Screen%20Shot%202013-06-11%20at%2013.03.45.png

Answer 2

使用linear-gradient css属性

.grad { 
  background-color: #F07575; /* fallback color if gradients are not supported */
  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome and Safari */
  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Fx (3.6 to 15) */
  background-image:     -ms-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For pre-releases of IE 10*/
  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
}