css3上下左右渐变效果，很酷，很强大
2024-05-30 21:05:57
css3上下左右渐变效果，很酷，很强大
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS 渐变</title><style>/* 线性渐变 */#grad1{height: 200px;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); /* 标准语法*/}#grad2{height: 200px;background: -webkit-linear-gradient(left,red,blue); /* Safari 5.1-6.0 */background: -o-linear-gradient(right,red,blue); /* Opera 11.1-12.0 */background: -moz-linear-gradient(right,red,blue);/* Firefox 3.6-15 */background: linear-gradient(to right,red,blue); /* 标准语法 */}#grad3{height: 200px;background: -webkit-linear-gradient(left top,red,blue); /* Safari 5.1-6.0 */background: -o-linear-gradient(bottom right,red,blue); /* Opera 11.1-12.0 */background: -moz-linear-gradient(bottom right,red,blue); /* Firefox 3.6-15 */background: linear-gradient(to bottom right,red,blue); /* 标准语法 */}#grad4{height: 200px;background: -webkit-linear-gradient(0deg,red,blue); /* Safari 5.1-6.0 */background: -o-linear-gradient(0deg,red,blue); /* Opera 11.1 -12.0 */background: -moz-linear-gradient(0deg,red,blue); /* Firefox 3.6-15 */background: linear-gradient(0deg,red,blue); /* 标准语法 必须放到最后 */}#grad5{height: 200px;background: -webkit-linear-gradient(90deg,red,blue); /* Safari 5.1-6.0 */background: -o-linear-gradient(90deg,red,blue); /* Opera 11.1-12.0 */background: -moz-linear-gradient(90deg,red,blue); /* Firefox 3.6-15 */background: linear-gradient(90deg,red,blue); /* 标准语法 必须放到最后 */}#grad6{height: 200px;background: -webkit-linear-gradient(180deg,red,blue); /* Safari 5.1-6.0 */background: -o-linear-gradient(180deg,red,blue); /* Opera 11.1-12.0 */background: -moz-linear-gradient(180deg,red,blue); /* Firefox 3.6-15 */background: linear-gradient(180deg,red,blue); /* 标准语法 必须放到最后*/}#grad7{height: 200px;background: -webkit-linear-gradient(-90deg,red,blue); /* Safari 5.1-6.0 */background: -o-linear-gradient(-90deg,red,blue); /* Opera 11.1-12.0 */background: -moz-linear-gradient(-90deg,red,blue); /* Firefox 3.6-15 */background: linear-gradient(-90deg,red,blue); /* 标准语法 必须放到最后 */}#grad8{height: 200px;background: -webkit-linear-gradient(red,green,blue);background: -o-linear-gradient(red,green,blue);background: -moz-linear-gradient(red,green,blue);background: linear-gradient(red,green,blue);}#grad9{height: 200px;background: -webkit-linear-gradient(red,purple,green,yellow,blue,orange,violet);background: -o-linear-gradient(red,purple,green,yellow,blue,orange,violet);background: -moz-linear-gradient(red,purple,green,yellow,blue,orange,indianred);background: linear-gradient(red,purple,green,yellow,blue,orange,indianred);}#grad10{height: 200px;background: -webkit-linear-gradient(red 10%,green 85%, blue 90%);background: -o-linear-gradient(red 10%, green 85%, blue 90%);background: -moz-linear-gradient(red 10%,green 85%, blue 90%);background: linear-gradient(red 10%,green 85%, blue 90%);}#grad11{height: 100px;background: -webkit-linear-gradient(left,red,purple,orange,green,blue,indianred,yellow);background: -o-linear-gradient(left,red,purple,orange,green,blue,indianred,yellow);background: -moz-linear-gradient(left,red,purple,orange,green,blue,indianred,yellow);background: linear-gradient(to right,red,purple,orange,green,blue,indianred,yellow);}#grad12{height: 200px;background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));background: -o-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));background: -moz-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));background: linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));}#grad13{height: 200px;background: -webkit-repeating-linear-gradient(red,yellow 10%,green 30%);background: -o-repeating-linear-gradient(red,yellow 10%,green 30%);background: -moz-repeating-linear-gradient(red,yellow 10%,green 30%);background: repeating-linear-gradient(red,yellow 10%,green 30%);}/* 径向渐变 */#grad14{height: 150px;width: 200px;background: -webkit-radial-gradient(red,green,blue);background: -o-radial-gradient(red,green,blue);background: -moz-radial-gradient(red,green,blue);background: radial-gradient(red,green,blue);}#grad15{height: 150px;width: 200px;background: -webkit-radial-gradient(red 5%,green 15%,blue 60%);background: -o-radial-gradient(red 5%,green 15%,blue 60%);background: -moz-radial-gradient(red 5%,green 15%,blue 60%);background: radial-gradient(red 5%,green 15%,blue 60%);}#grad16{height: 150px;width: 200px;background: -webkit-radial-gradient(red,yellow,green);background: -o-radial-gradient(red,yellow,green);background: -moz-radial-gradient(red,yellow,green);background: radial-gradient(red,yellow,green);}#grad17{height: 150px;width: 200px;background: -webkit-radial-gradient(circle,red,yellow,green);background: -o-radial-gradient(circle,red,yellow,green);background: -moz-radial-gradient(circle,red,yellow,green);background: radial-gradient(circle,red,yellow,green);}#grad18{height: 150px;width: 150px;background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* 标准的语法（必须放在最后） */;}#grad19 {height: 150px;width: 150px;background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* 标准的语法（必须放在最后） */}#grad20 {height: 150px;width: 150px;background: -webkit-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */background: -o-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */background: -moz-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */background: radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* 标准的语法（必须放在最后） */}#grad21 {height: 150px;width: 150px;background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */background: radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* 标准的语法（必须放在最后） */}#grad22 {height: 150px;width: 200px;background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1 - 6.0 */background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6 - 12.0 */background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6 - 15 */background: repeating-radial-gradient(red, yellow 10%, green 15%); /* 标准的语法（必须放在最后） */}</style>
</head>
<body>
<h2>线性渐变 - 从上到下</h2>
<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色</p>
<div id="grad1"></div>
<p><strong>注意：</strong>Internet Explorer 9 及之前的版本不支持渐变</p><h2>线性渐变 - 从左到右</h2>
<p>从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p><div id="grad2"></div><p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p><h2>线性变化 - 对角</h2><p>从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：</p><div id="grad3"></div><p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p><h2>线性渐变 - 使用不同的角度 </h2>
<div id="grad4" style="color: white;text-align: center">0deg</div> <br><br>
<div id="grad5" style="color: white;text-align: center">90deg</div> <br><br>
<div id="grad6" style="color: white;text-align: center">180deg</div> <br><br>
<div id="grad7" style="color: white;text-align: center">-90deg</div> <br><br>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p><h2>线性渐变 - 多个颜色点 </h2>
<h3>3个颜色节点 均匀分布</h3>
<div id="grad8"></div>
<h3>7个颜色节点 均匀分布</h3>
<div id="grad9"></div>
<h3>3个颜色节点 不均匀分布</h3>
<div id="grad10"></div>
<p><strong>注意：</strong> 当指定百分比时，颜色是不均匀分布。</p>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p><h2>线性渐变 - 渐变背景</h2>
<div id="grad11" style="text-align: center;margin: auto;color: #888888;font-size: 50px">渐变背景</div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p><h2>线性渐变 - 透明度</h2>
<p>为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
</p>
<div id="grad12"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p><h2>重复的线性渐变</h2>
<div id="grad13"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p><br><br><h2>径向渐变 - 颜色结点均匀分布</h2>
<div id="grad14"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p><h2>径向渐变 - 颜色结点不均匀分布</h2>
<div id="grad15"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p><h2>径向渐变 - 形状</h2>
<p><strong>椭圆形 Ellipse（默认）：</strong></p>
<div id="grad16"></div><p><strong>圆形 Circle：</strong></p>
<div id="grad17"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p><h2>径向渐变 - 不同尺寸大小关键字的使用</h2><p><strong>closest-side：</strong></p>
<div id="grad18"></div><p><strong>farthest-side：</strong></p>
<div id="grad19"></div><p><strong>closest-corner：</strong></p>
<div id="grad20"></div><p><strong>farthest-corner（默认）：</strong></p>
<div id="grad21"></div><h2>重复的径向渐变</h2><div id="grad22"></div><p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p></body>
</html>
我的其他原创文章：
- 微信视频直播如何做收费直播（如何做付费的微信直播）图文教程
- 原创教程：带ppt课件和讲师画面的教学视频录制完整教程
- 做视频直播时如何测试本地网络的上行带宽(网速测试)
- usb摄像头做教学直播实现pc和手机都可以在线观看教程
- 微信公众号直播有哪些不一样的玩法？
- 如何做电脑游戏桌面录屏直播实现手机直接观看
- 免费视频存储平台（微云、百度网盘、谷歌硬盘、酷播云）的截图对比
- 云课堂直播功能介绍，更贴合在线教育、企业内训的场景应用
- 基于微信小程序做直播的截图（微信小程序发起视频直播）
- 在线教学场景下 讲师们做PPT课件直播的一些介绍
- FMS/wowza/red5/SRS流媒体服务器产品对比
- 在微信公众号中添加外部的链接图文教程
- 企业级微信视频直播如何设定观看白名单（设定手机观看白名单、授权观看直播）
- 无广告视频存储加速一整套免费视频服务（youku视频广告太长）
- 在线教育网站如何更好的实现视频安全视频保护？
- 如何做新品发布会直播(新品推介会直播)基于云直播平台
- 医疗类直播(临床教学、手术观摩学习、医疗器械教学类)图文教程
- 在线教学直播中做ppt文档的在线直播(在线课常多画面直播)教程
- 双机位摄像机视频直播(多机位摄像机视频直播)时硬件连接示意图
css3上下左右渐变效果，很酷，很强大相关推荐
- 笑脸墙------很好,很酷,很强大(一)
笑脸墙------很好,很酷,很强大(一) 笑脸墙是款基于flash技术的在线多媒体网页创建工具,使用它,您可以轻松的将图像.视频.音频.文字汇聚在一个网页上,呈现传统网页技 术无法或是极难才能达到的 ...
- Unix / 类 Unix shell 中有哪些很酷很冷门很少用很有用的命令？（转）
著作权归作者所有. 商业转载请联系作者获得授权,非商业转载请注明出处. 作者:孙立伟 链接:http://www.zhihu.com/question/20140085/answer/14107336 ...
- 爬虫技术做到哪些很酷很有趣很有用的事情
能利用爬虫技术做到哪些很酷很有趣很有用的事情? 准备学习python爬虫.各位大神都会用爬虫做哪些有趣的事情? 今天突然想玩玩爬虫,就提了这个问题.跟着YouTube上的一个tutor写了个简单的程序 ...
- 计算机视觉，图像处理 经典代码paper整理（很全很强大！）
转自:Jia-Bin Huang 同学收集了很多计算机视觉方面的代码 ,链接如下: https://netfiles.uiuc.edu/jbhuang1/www/resources/vision/in ...
- 【Python】用 Highcharts 绘制饼图，也很强大
来源:Python数据之道 作者:Peter 整理:阳哥 用 Highcharts 绘制饼图,也很强大 前不久,分享了读者投稿的文章,较为综合的介绍了可视化库 Highcharts ,这个一个 Jav ...
- 肝！用 Highcharts 绘制饼图，也很强大
来源 / Python数据之道 作者/Peter 整理/阳哥 用 Highcharts 绘制饼图,也很强大 前不久,分享了读者投稿的文章,较为综合的介绍了可视化库 Highcharts ,这个一个 ...
- 表单和字都居中_APP 分享 | 6 款黑科技工具,低调收藏,每一款都很强大!
iSlide 简单.高效地制作PPT 使用环境: Windows 使用要求: Office 2010 及以上版本 授权状况: 无广告 有付费功能 官网地址: www.islid ...
- sed很强大的文本操作命令
sed对文本的处理很强大,并且sed非常小,参数少,容易掌握,他的操作方式根awk有点像.sed按顺序逐行读取文件.然后,它执行为 该行指定的所有操作,并在完成请求的修改之后的内容显示出来,也可以存放 ...
- java 跨平台很鸡肋,Mac 篇八：Mac上的这个软件看起来很鸡肋，其实很牛很强大
Mac 篇八:Mac上的这个软件看起来很鸡肋,其实很牛很强大 2019-11-26 11:37:36 8点赞 42收藏 1评论 用了很多年Mac,可能这个应用都没有注意到,看起来不起眼,其实用好它,不 ...
最新文章
- 第十周项目3-血型统计
- 理解SetWindowOrg,SetViewportOrg,SetWindowExt,SetViewportExt
- Android 屏幕常亮、低电量监听
- ASP.NET Compilation and Deployment
- Golang的数组与切片——详解
- iis7.5 php虚拟站点目录设置,windows2008中IIS7.5环境下 Fastcgi模式PHP配置教程
- QT5之修改程序图标
- 全面的软件测试-软件测试图解
- 计算机怎么禁止远程桌面,win7怎样禁用远程桌面共享_win7系统禁用远程桌面共享的步骤－系统城...
- 视频教程-C/C++黑客编程入门教学视频-C/C++
- day7 局部变量和封装
- 库卡机器人坐标手势_库卡机器人为何要几种坐标系？
- Android第三方推送到达率调研
- Option3X 5G 全网部署（基于 IUV_5G 软件）
- 精简计算机管理,Windows系统精简工具，将你的系统精简到最快最小！
- 小白也能写前端？推荐一款超实用的app----JsHD调试器，助你写出炫酷的网页！
- SIGCOMM13论文简要选读
- Fragment嵌套Fragment
- Linux共享库编程方法,Linux共享库c
- 豆瓣FM duilib版