平滑的CSS渐变 [英] Smooth CSS gradients

问题描述

我正在学习如何使用CSS渐变。

我的问题是从顶部到底部的渐变。

这是我的CSS代码

  #header {
 width：1000px; 
 height：250px 
 background：-moz-linear-gradient（top，＃BF7A30 30％，＃EDD599）; 
 background：-webkit-linear-gradient（top，＃BF7A30 30％，＃EDD599）; 
} 
  

有没有办法平滑从上到下梯度的止损？

解决方案

Think's below css（从左到右或从右到左渐变不是很明显）

CSS

  #header {
 width：1000px; 
 height：250px; 
 / * IE10 Consumer Preview * / 
 background-image：-ms-linear-gradient（bottom，＃EDD799 0％，＃BF7F37 100％）; 
 / * Mozilla Firefox * / 
 background-image：-moz-linear-gradient（bottom，＃EDD799 0％，＃BF7F37 100％）; 
 / * Opera * / 
 background-image：-o-linear-gradient（bottom，＃EDD799 0％，＃BF7F37 100％）; 
 / * Webkit（Safari / Chrome 10）* / 
 background-image：-webkit-gradient（linear，left bottom，left top，color-stop（0，＃EDD799），color-stop 1，＃BF7F37））; 
 / * Webkit（Chrome 11+）* / 
 background-image：-webkit-linear-gradient（bottom，＃EDD799 0％，＃BF7F37 100％）; 
 / * W3C标记，IE10发布预览* / 
 background-image：linear-gradient（to top，＃EDD799 0％，＃BF7F37 100％）; 
} 
  

http://jsfiddle.net/xPLPH/

详细了解线性渐变：
https://developer.mozilla.org/en-US/docs / CSS / linear-gradient

I'm learning how to use CSS gradients.

My problem is with top to bottom gradients. You can just see the "stops" in the color changing.

This is my CSS code

#header { 
   width:1000px; 
   height:250px; 
   background:-moz-linear-gradient(top, #BF7A30 30%, #EDD599); 
   background:-webkit-linear-gradient(top, #BF7A30 30%, #EDD599); 
}

Is there a way to smooth out the stops in top to bottom gradients? (this, to my eye, isn't very visible in left to right or right to left gradients)

解决方案

Think's below css will suite your need.

CSS :

#header {
    width:1000px;
    height:250px;
    /* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
    /* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
    /* Opera */ 
background-image: -o-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
    /* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #EDD799), color-stop(1, #BF7F37));
    /* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%);
    /* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #EDD799 0%, #BF7F37 100%);
}

http://jsfiddle.net/xPLPH/

Learn more about Linear Gradients: https://developer.mozilla.org/en-US/docs/CSS/linear-gradient

这篇关于平滑的CSS渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！