html - 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 */
}

Answer 2

使用线性渐变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 */
}