css3上下左右渐变效果，很酷，很强大

css3上下左右渐变效果，很酷，很强大

    
    
    


线性渐变 - 从上到下
从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色



注意：Internet Explorer 9 及之前的版本不支持渐变

线性渐变 - 从左到右
从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：



注意： Internet Explorer 9 及之前的版本不支持渐变。

线性变化 - 对角

从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：



注意： Internet Explorer 9 及之前的版本不支持渐变。

线性渐变 - 使用不同的角度 
0deg
 


90deg
 


180deg
 


-90deg
 


注意： Internet Explorer 9 及之前的版本不支持渐变。


线性渐变 - 多个颜色点  
3个颜色节点 均匀分布

7个颜色节点 均匀分布

3个颜色节点 不均匀分布

注意： 当指定百分比时，颜色是不均匀分布。
注意： Internet Explorer 9 及之前的版本不支持渐变。

线性渐变 - 渐变背景
渐变背景
注意： Internet Explorer 9 及之前的版本不支持渐变。


线性渐变 - 透明度

    为了添加透明度，我们使用 rgba() 函数来定义颜色结点。
    rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。


注意： Internet Explorer 9 及之前的版本不支持渐变。

重复的线性渐变

注意： Internet Explorer 9 及之前的版本不支持渐变。





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

注意： Internet Explorer 9 及之前的版本不支持渐变。

径向渐变 - 颜色结点不均匀分布

注意： Internet Explorer 9 及之前的版本不支持渐变。

径向渐变 - 形状
椭圆形 Ellipse（默认）：


圆形 Circle：

注意： Internet Explorer 9 及之前的版本不支持渐变。


径向渐变 - 不同尺寸大小关键字的使用

closest-side：


farthest-side：


closest-corner：


farthest-corner（默认）：



重复的径向渐变



注意： Internet Explorer 9 及之前的版本不支持渐变。

我的其他原创文章：

• 微信视频直播如何做收费直播（如何做付费的微信直播）图文教程
• 原创教程：带ppt课件和讲师画面的教学视频录制完整教程
• 做视频直播时如何测试本地网络的上行带宽(网速测试)
• usb摄像头做教学直播实现pc和手机都可以在线观看教程
• 微信公众号直播有哪些不一样的玩法？
• 如何做电脑游戏桌面录屏直播实现手机直接观看
• 免费视频存储平台（微云、百度网盘、谷歌硬盘、酷播云）的截图对比
• 云课堂直播功能介绍，更贴合在线教育、企业内训的场景应用
• 基于微信小程序做直播的截图（微信小程序发起视频直播）
• 在线教学场景下 讲师们做PPT课件直播的一些介绍
• FMS/wowza/red5/SRS流媒体服务器产品对比
• 在微信公众号中添加外部的链接图文教程
• 企业级微信视频直播如何设定观看白名单（设定手机观看白名单、授权观看直播）
• 无广告视频存储加速一整套免费视频服务（youku视频广告太长）
• 在线教育网站如何更好的实现视频安全视频保护？
• 如何做新品发布会直播(新品推介会直播)基于云直播平台
• 医疗类直播(临床教学、手术观摩学习、医疗器械教学类)图文教程
• 在线教学直播中做ppt文档的在线直播(在线课常多画面直播)教程
• 双机位摄像机视频直播(多机位摄像机视频直播)时硬件连接示意图