0
点赞
收藏
分享

微信扫一扫

css渐变色(css渐变色代码 rgba)


如何制作渐变色的饮?如何制作渐变色的饮料

你好 这个需要不同密度的酒才可以制作的啊。

黑色不能印渐变色吗?

黑色也是可以印渐变色的,只是效果不明显而已。

css 如何实现 颜色的渐变??

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

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

2、在index.html中的

div {width: 200px;height: 150px;background: linear-gradient(red, white);}

3、浏览器运行index.html页面,此时td中的div的背景颜色从红色到白色渐变。

CSS3支持颜色渐变,但目前主流浏览器对CSS3支持都不完全,甚至不支持。

所以你可以使用背景图片来做,你要竖向渐变,可以将图片切成宽1px的背景,然后设置这个DIV的背景平铺。如:background:url(bg.gif) left right repeat-x;在Mozilla 下

background: -moz-linear-gradient( top,#ccc,#000);

1,起点位置top 是从上到下,left是从左到右,left top是左上到右下

2,开始颜色,

3,结束颜色

在Webkit下

-webkit-linear-gradient(top,#ccc,#000);

参数与mozilla一致

在 Opera 下

background: -o-linear-gradient(top,#ccc, #000);

数与mozilla一致

更多的参数应用可以去度娘查询,有很详细参数使用示例.滤镜可以做,不过兼容性只有IE支持线性渐变(linear gradients)- 向下/向上/向左/向右/对角方向

从上到下的线性渐变:

#grad {

background: -webkit-linear-gradient(red, blue); /* safari 5.1 - 6.0 */

background: -o-linear-gradient(red, blue); /* opera 11.1 - 12.0 */

background: -moz-linear-gradient(red, blue); /* firefox 3.6 - 15 */

background: linear-gradient(red, blue); /* 标准的语法 */

-----------------------------------------------------------------------

径向渐变(radial gradients)- 由它们的中心定义

颜色结点均匀分布的径向渐变:

#grad {

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

background: radial-gradient(red, green, blue); /* 标准的语法 */

}css3标准里可以实现背景色渐变、圆角边框的语句\

目前css2.0不支持这样的语句,要实现真得用js

CSS定义渐变色

[html]
input {border:0px;font-size:12px;align:center;width:60px;height:24px;}
.a {filter:progidXImageTransform.Microsoft.gradient(startcolorstr=#00b1ff,endcolorstr=#0054b7,gradientType=0);}
.b {filter:progidXImageTransform.Microsoft.gradient(startcolorstr=#bfee00,endcolorstr=#94b800,gradientType=0);}
.c {filter:progidXImageTransform.Microsoft.gradient(startcolorstr=#fccf00,endcolorstr=#fa9104,gradientType=0);}
.d {filter:progidXImageTransform.Microsoft.gradient(startcolorstr=#fd40c0,endcolorstr=#e00289,gradientType=0);}
.e {filter:progidXImageTransform.Microsoft.gradient(startcolorstr=#fd0004,endcolorstr=#d10000,gradientType=0);}

举报

相关推荐

0 条评论