CSS3 渐变色彩Gradient

本文深入解析CSS3 Gradient,包括线性渐变与径向渐变的概念、参数及应用实例,通过示例展示如何使用角度关键词或英文表示渐变方向,以及设置颜色起始点和结束点。
CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。

[img]http://dl2.iteye.com/upload/attachment/0106/9652/c6f1a934-e6da-3478-864a-1963ae5cbccb.jpg[/img]

第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示。
第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值。

角度 英文 作用
0deg to top 由下向上
90deg to right 由左向右
180deg to bottom 由上向下
270deg to left 由右向左
to top left 右下角向左上角
to top right 左下角向右上角


background-image:linear-gradient(to top left, red, orange,yellow,green,blue,indigo,violet);


[img]http://dl2.iteye.com/upload/attachment/0106/9658/d91067ae-b581-312e-9de1-08fdfb541f33.jpg[/img]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值