渐变色css按钮样式,渐变色css按钮样式设置

如何用css写渐变色。

/*上下线性渐变（兼容IE10及以上）*/

background:-webkit-linear-gradient(#fff,#000);/*兼容webkit内核，比如Chrome*/

background:-moz-linear-gradient(#fff,#000);/*兼容老火狐浏览器*/

background:-o-linear-gradient(#fff,#000);/*兼容老欧朋Opera浏览器*/

background:linear-gradient(#fff,#000);/*适用于所有新版本浏览器*/

/*左右线性渐变（兼容IE10及以上，第一个值是left或right）*/

background:-webkit-linear-gradient(left,#fff,#000);/*兼容webkit内核，比如Chrome*/

background:-moz-linear-gradient(left,#fff,#000);/*兼容老火狐浏览器*/

background:-o-linear-gradient(left,#fff,#000);/*兼容老欧朋Opera浏览器*/

background:linear-gradient(left,#fff,#000);/*适用于所有新版本浏览器*/

/*兼容IE6-9渐变（只适用于线性渐变，参数enabled:true表示激活滤镜，false表示不激活；gradientType:0表示上下渐变，1表示左右渐变；startColorStr：起始渐变值，可以是#ffffff形式也可以是#ffffffff形式，此形式前两位表示透明度；endColorStr：结束渐变值，可以是#000000形式也可以是#ff000000形式，此形式前两位表示透明度。）*/

filter:progid:DXImageTransform.Microsoft.Gradient(enabled='true',gradientType=0,startColorStr='#ffffff',endColorStr='#000000');

/*径向渐变（兼容IE10及以上）*/

background:-webkit-radial-gradient(#f00,#0f0,#00f);/*兼容webkit内核，比如Chrome*/

background:-moz-radial-gradient(#f00,#0f0,#00f);/*兼容老火狐浏览器*/

background:-o-radial-gradient(#f00,#0f0,#00f);/*兼容老欧朋Opera浏览器*/

background:radial-gradient(#f00,#0f0,#00f);/*适用于所有新版本浏览器*/

相关问答

Q1: CSS怎样实现背景颜色渐变

background:-webkit-gradient(linear ,10% 10%，100% 100%，

color-stop(0.14,rgb(255,0,0)),

color-stop(0.5,rgb(255,255,0)),

color-stop(1,rgb(0,0,255)) );

第一个参数：表示的是渐变的类型

linear线性渐变

第二个参数：分别对应x，y方向渐变的起始位置

第三个参数：分别对应x，y方向渐变的终止位置

第四/五/N个参数：设置渐变的位置及颜色

(2)第二种写法：这种写法比较简单，而且效果比较自然

background:-webkit-gradient(linear, 0 0, 0 100%, from(＃2074af), to(＃2c91d2));

第一个参数：表示的是渐变的类型

linear线性渐变

第二个参数：分别对应x，y方向渐变的起始位置

第三个参数：分别对应x，y方向渐变的终止位置

第四个参数：设置了起始位置的颜色

二.Mozilla浏览器

(1)第一种写法：

background:-moz-linear-gradient(10 10 90deg,

rgb(25,0,0) 14%,

rgb(255,255,0) 50%,

rgb(0,0,255) 100%);

第一个参数：设置渐变起始位置及角度

第二/三/四/N个参数：设置渐变的颜色和位置

(2)第二种写法：这种写法比较简单，而且效果比较自然

background:-moz-linear-gradient(top, ＃FFC3C8,＃FF9298);

第一个参数：设置渐变的起始位置

第二个参数：设置起始位置的颜色

第三个参数：设置终止位置的颜色

三.IE 浏览器

IE浏览器实现渐变只能使用IE自己的滤镜去实现

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);

第一个参数：渐变起始位置的颜色

第二个参数：渐变终止位置的颜色

第三个参数：渐变的类型

0 代表竖向渐变        1  代表横向渐变

注意：这里设置背景的时候不需要给background设置，直接用filter即可，不要和其他的浏览器混淆

第五个参数：设置了终止位置的颜色

代码演示：

效果图：

代码：

效果：

Q2: CSS 文字渐变的几种方式

css文件渐变虽然兼容性比较差，但是用在移动端和chrome中还是没有问题的。

实现文件渐变的方法有两种

效果如下

-webkit-background-clip W3C支持的属性说明

但是并没有text 属性，所以这个只能在chrome上看到效果，在其他浏览器没有实现，它的兼容性就有很大的问题了

-webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。

缺点：webkit 内核浏览器特有

效果如下

使用：mask-image

缺点：webkit 内核浏览器特有

采用 svg 方式

实现原理：程序首先算出字体所在容器的高度N，然后清空容器内容，并添加N个span，每个span内容都为原容器的文字，每个span的颜色根据渐变色进行计算，而且其中的文字定位都相比之前一个span的文字向上偏移一个像素。CSS中可以看到，每个span的高度都为1。这样，我们就通过N各不同颜色的1px的span把字体“拼”出来了，然后加上“高光/阴影”就搞定。

Q3: css字体渐变，css怎样定义让字体有渐变颜色

1、新建一个html文件，命名为test.html。

2、在test.html文件内，使用font标签创建三行文字，分别用不同的方法给font字体设置颜色。

3、在test.html文件内，直接在font标签上，通过color属性来设置字体的颜色。例如，设置font字体的颜色为红色。

4、在test.html文件内，设置font标签的class属性为myclass，主要用于下面通过该class来设置css样式。

5、在test.html文件内，设置font标签的id属性为myid，主要用于下面通过该id来设置css样式。

6、在css标签中，设置类名为myclass的样式，例如，设置color属性为蓝色（blue）；设置id为myid的样式，例如，设置color属性为粉红色（pink）。

7、在浏览器打开test.html文件，查看实现的效果。

Q4: 用CSS如何设置网页渐变背景?

在background-image属性中使用linear-gradient（）。

background-image：bg-image [ , bg-image ]

bg-image = image | none

默认值：none

适用于：所有元素

继承性：无

动画性：否

计算值：指定值

取值：

none：无背景图。

image：使用绝对或相对地址指或者创建渐变色来确定图像。

linear-gradient = linear-gradient([ [ angle | to side-or-corner ] ,]? color-stop[, color-stop]+)

side-or-corner = [left | right] || [top | bottom]

color-stop = color [ length | percentage ]?

取值：

下述值用来表示渐变的方向，可以使用角度或者关键字来设置：

angle：

用角度值指定渐变的方向（或角度）。

to left：

设置渐变为从右到左。相当于: 270deg

to right：

设置渐变从左到右。相当于: 90deg

to top：

设置渐变从下到上。相当于: 0deg

to bottom：

设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。

color-stop 用于指定渐变的起止颜色：

color：

指定颜色。

length：

用长度值指定起止色位置。不允许负值

percentage：

用百分比指定起止色位置。

说明：

用线性渐变创建图像。

如果想创建以对角线方式渐变的图像，可以使用 to top left 这样的多关键字方式来实现。

Q5: css3渐变色怎么来实现，css3渐变色怎么写

!DOCTYPE html

html lang="en"

head

    meta charset="UTF-8"

    titleDocument/title

    style type="text/css"

        div{  /*线性渐变*/

            width:300px;

            height:150px;

            background:red; /* 一些不支持背景渐变的浏览器 */

            background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));

            background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));

            background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));

        }

        p{  /*径向渐变*/

            width:300px;

            height:150px;

            background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */

            background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */

            background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */

         }

    /style

/head

body

div

/div

p

/p

/body

/html