Question

css如何实现颜色的过渡效果

就像“亚马逊”上，搜索按钮 中间白、四周黑，按钮右边的条形 上方白、下方灰
这是怎么实现的？我确信它没有用背景图片
最好有源码，谢谢

Answer 1

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：

button {width: 100px; height: 50px;border: 0;color: white;background: -webkit-radial-gradient(#72787f, #545c64);}

3、浏览器运行index.html页面，此时用CSS实现了按钮中间白、四周黑，上方白、下方灰的效果。

Answer 2

css实现颜色的过渡效果步骤如下：

1、如果没用用到css3过渡效果transition，那么div一般的宽度高度颜色都是固定死的。

2、如图，这就是已经固定了宽高的div元素了，但是如果对它添加了transition之后就会有过渡。

3、transition是配合hover的，所以设置元素:hover便可以。

4、然后再使用transition设置对应的属性（width）之类即可，比如小编我只单独设置了width，空格隔开然后写时间（5s）表示五秒时间。

5、如果想要让div或其他元素多属性过渡那么简单用逗号隔开属性即可。

Answer 3

css这么写就全部兼容了。

.xx{background: -webkit-linear-gradient(top,#f0f0f0 0,#e3e3e3 100%);
background: -moz-linear-gradient(top,#f0f0f0 0,#e3e3e3 100%);
background: -o-linear-gradient(top,#f0f0f0 0,#e3e3e3 100%);
background: linear-gradient(to bottom,#f0f0f0 0,#e3e3e3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f0f0f0,endColorstr=#e3e3e3,GradientType=0);}

追问

颜色代码后面的0、100%是什么意思？
background: linear-gradient(to bottom,#f0f0f0 0,#e3e3e3 100%);是针对什么浏览器的？其中“to bottom”可以改为"top"吗？

追答

1、0 100%是渐变开始的位置，如果是50% 100%，那渐变就充容器的中间位置开始

2、这个是针对支持css3的ie浏览器的。比如ie10
3、to bottom可以改为top，这个是渐变的走势。。

补充：filter里面的gradientType = 0是垂直方向上的渐变。如果改为1就变为左右方向上的了。

Answer 4

css3的渐变-webkit-linear-gradient(top,#000,#fff);
-moz-linear-gradient(top,#000,#fff);
-o-linear-gradient(top,,#000,#fff);