css从上到下渐变色的实现

2020-12-02 06:05:54   catherine

在css上实现渐变色，只需要一句代码就可以了。以下是从上到下渐变的。

  1. #grad {
  2.     background-image: linear-gradient(#e66465, #9198e5);
  3. }

下面的例子拿来看下就明白了：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CSS 渐变</title>
  6.     <style>
  8.         /* 线性渐变 */
  9.         #grad1{
  10.             height: 200px;
  11.             background: -webkit-linear-gradient(red,blue); /* Safari 5.1-6.0 */
  12.             background: -o-linear-gradient(red,blue);  /* Opera 11.1-12.0 */
  13.             background: -moz-linear-gradient(red,blue); /* Firefox 3.6-15 */
  14.             background: linear-gradient(red,blue); /* 标准语法*/
  15.         }
  18.         #grad2{
  19.             height: 200px;
  20.             background: -webkit-linear-gradient(left,red,blue); /* Safari 5.1-6.0 */
  21.             background: -o-linear-gradient(right,red,blue); /* Opera 11.1-12.0 */
  22.             background: -moz-linear-gradient(right,red,blue);/* Firefox 3.6-15 */
  23.             background: linear-gradient(to right,red,blue); /* 标准语法 */
  24.         }
  26.         #grad3{
  27.             height: 200px;
  28.             background: -webkit-linear-gradient(left top,red,blue); /* Safari 5.1-6.0 */
  29.             background: -o-linear-gradient(bottom right,red,blue); /* Opera 11.1-12.0 */
  30.             background: -moz-linear-gradient(bottom right,red,blue); /* Firefox 3.6-15 */
  31.             background: linear-gradient(to bottom right,red,blue); /* 标准语法 */
  32.         }
  34.         #grad4{
  35.             height: 200px;
  36.             background: -webkit-linear-gradient(0deg,red,blue); /* Safari 5.1-6.0 */
  37.             background: -o-linear-gradient(0deg,red,blue);  /* Opera 11.1 -12.0 */
  38.             background: -moz-linear-gradient(0deg,red,blue); /* Firefox 3.6-15 */
  39.             background: linear-gradient(0deg,red,blue);  /* 标准语法 必须放到最后 */
  40.         }
  42.         #grad5{
  43.             height: 200px;
  44.             background: -webkit-linear-gradient(90deg,red,blue); /* Safari 5.1-6.0 */
  45.             background: -o-linear-gradient(90deg,red,blue); /* Opera 11.1-12.0 */
  46.             background: -moz-linear-gradient(90deg,red,blue); /* Firefox 3.6-15 */
  47.             background: linear-gradient(90deg,red,blue); /* 标准语法 必须放到最后 */
  48.         }
  50.         #grad6{
  51.             height: 200px;
  52.             background: -webkit-linear-gradient(180deg,red,blue); /* Safari 5.1-6.0 */
  53.             background: -o-linear-gradient(180deg,red,blue); /* Opera 11.1-12.0 */
  54.             background: -moz-linear-gradient(180deg,red,blue); /* Firefox 3.6-15 */
  55.             background: linear-gradient(180deg,red,blue); /* 标准语法 必须放到最后*/
  57.         }
  59.         #grad7{
  60.             height: 200px;
  61.             background: -webkit-linear-gradient(-90deg,red,blue); /* Safari 5.1-6.0 */
  62.             background: -o-linear-gradient(-90deg,red,blue);  /* Opera 11.1-12.0 */
  63.             background: -moz-linear-gradient(-90deg,red,blue); /* Firefox 3.6-15 */
  64.             background: linear-gradient(-90deg,red,blue);  /* 标准语法 必须放到最后 */
  65.         }
  67.         #grad8{
  68.             height: 200px;
  69.             background: -webkit-linear-gradient(red,green,blue);
  70.             background: -o-linear-gradient(red,green,blue);
  71.             background: -moz-linear-gradient(red,green,blue);
  72.             background: linear-gradient(red,green,blue);
  73.         }
  75.         #grad9{
  76.             height: 200px;
  77.             background: -webkit-linear-gradient(red,purple,green,yellow,blue,orange,violet);
  78.             background: -o-linear-gradient(red,purple,green,yellow,blue,orange,violet);
  79.             background: -moz-linear-gradient(red,purple,green,yellow,blue,orange,indianred);
  80.             background: linear-gradient(red,purple,green,yellow,blue,orange,indianred);
  81.         }
  83.         #grad10{
  84.             height: 200px;
  85.             background: -webkit-linear-gradient(red 10%,green 85%, blue 90%);
  86.             background: -o-linear-gradient(red 10%, green 85%, blue 90%);
  87.             background: -moz-linear-gradient(red 10%,green 85%, blue 90%);
  88.             background: linear-gradient(red 10%,green 85%, blue 90%);
  90.         }
  92.         #grad11{
  93.             height: 100px;
  94.             background: -webkit-linear-gradient(left,red,purple,orange,green,blue,indianred,yellow);
  95.             background: -o-linear-gradient(left,red,purple,orange,green,blue,indianred,yellow);
  96.             background: -moz-linear-gradient(left,red,purple,orange,green,blue,indianred,yellow);
  97.             background: linear-gradient(to right,red,purple,orange,green,blue,indianred,yellow);
  98.         }
  100.         #grad12{
  101.             height: 200px;
  102.             background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
  103.             background: -o-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
  104.             background: -moz-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
  105.             background: linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));
  106.         }
  108.         #grad13{
  109.             height: 200px;
  110.             background: -webkit-repeating-linear-gradient(red,yellow 10%,green 30%);
  111.             background: -o-repeating-linear-gradient(red,yellow 10%,green 30%);
  112.             background: -moz-repeating-linear-gradient(red,yellow 10%,green 30%);
  113.             background: repeating-linear-gradient(red,yellow 10%,green 30%);
  114.         }
  117.         /* 径向渐变 */
  119.         #grad14{
  120.             height: 150px;
  121.             width: 200px;
  122.             background: -webkit-radial-gradient(red,green,blue);
  123.             background: -o-radial-gradient(red,green,blue);
  124.             background: -moz-radial-gradient(red,green,blue);
  125.             background: radial-gradient(red,green,blue);
  126.         }
  128.         #grad15{
  129.             height: 150px;
  130.             width: 200px;
  131.             background: -webkit-radial-gradient(red 5%,green 15%,blue 60%);
  132.             background: -o-radial-gradient(red 5%,green 15%,blue 60%);
  133.             background: -moz-radial-gradient(red 5%,green 15%,blue 60%);
  134.             background: radial-gradient(red 5%,green 15%,blue 60%);
  135.         }
  137.         #grad16{
  138.             height: 150px;
  139.             width: 200px;
  140.             background: -webkit-radial-gradient(red,yellow,green);
  141.             background: -o-radial-gradient(red,yellow,green);
  142.             background: -moz-radial-gradient(red,yellow,green);
  143.             background: radial-gradient(red,yellow,green);
  145.         }
  147.         #grad17{
  148.             height: 150px;
  149.             width: 200px;
  150.             background: -webkit-radial-gradient(circle,red,yellow,green);
  151.             background: -o-radial-gradient(circle,red,yellow,green);
  152.             background: -moz-radial-gradient(circle,red,yellow,green);
  153.             background: radial-gradient(circle,red,yellow,green);
  155.         }
  157.         #grad18{
  158.             height: 150px;
  159.             width: 150px;
  160.             background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
  161.             background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
  162.             background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */
  163.             background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* 标准的语法（必须放在最后） */;
  164.         }
  166.         #grad19 {
  167.             height: 150px;
  168.             width: 150px;
  169.             background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
  170.             background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
  171.             background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */
  172.             background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* 标准的语法（必须放在最后） */
  173.         }
  175.         #grad20 {
  176.             height: 150px;
  177.             width: 150px;
  178.             background: -webkit-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
  179.             background: -o-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
  180.             background: -moz-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */
  181.             background: radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* 标准的语法（必须放在最后） */
  182.         }
  184.         #grad21 {
  185.             height: 150px;
  186.             width: 150px;
  187.             background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
  188.             background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
  189.             background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */
  190.             background: radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* 标准的语法（必须放在最后） */
  191.         }
  193.         #grad22 {
  194.             height: 150px;
  195.             width: 200px;
  196.             background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1 - 6.0 */
  197.             background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6 - 12.0 */
  198.             background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6 - 15 */
  199.             background: repeating-radial-gradient(red, yellow 10%, green 15%); /* 标准的语法（必须放在最后） */
  200.         }
  205.     </style>
  206. </head>
  207. <body>
  208. <h2>线性渐变 - 从上到下</h2>
  209. <p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色</p>
  210. <div id="grad1">
  212. </div>
  213. <p><strong>注意：</strong>Internet Explorer 9 及之前的版本不支持渐变</p>
  215. <h2>线性渐变 - 从左到右</h2>
  216. <p>从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
  218. <div id="grad2"></div>
  220. <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
  222. <h2>线性变化 - 对角</h2>
  224. <p>从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
  226. <div id="grad3"></div>
  228. <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
  230. <h2>线性渐变 - 使用不同的角度 </h2>
  231. <div id="grad4" style="color: white;text-align: center">0deg</div> <br><br>
  232. <div id="grad5" style="color: white;text-align: center">90deg</div> <br><br>
  233. <div id="grad6" style="color: white;text-align: center">180deg</div> <br><br>
  234. <div id="grad7" style="color: white;text-align: center">-90deg</div> <br><br>
  235. <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
  238. <h2>线性渐变 - 多个颜色点  </h2>
  239. <h3>3个颜色节点 均匀分布</h3>
  240. <div id="grad8"></div>
  241. <h3>7个颜色节点 均匀分布</h3>
  242. <div id="grad9"></div>
  243. <h3>3个颜色节点 不均匀分布</h3>
  244. <div id="grad10"></div>
  245. <p><strong>注意：</strong> 当指定百分比时，颜色是不均匀分布。</p>
  246. <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
  248. <h2>线性渐变 - 渐变背景</h2>
  249. <div id="grad11" style="text-align: center;margin: auto;color: #888888;font-size: 50px">渐变背景</div>
  250. <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
  253. <h2>线性渐变 - 透明度</h2>
  254. <p>
  255.     为了添加透明度，我们使用 rgba() 函数来定义颜色结点。
  256.     rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
  257. </p>
  258. <div id="grad12"></div>
  259. <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
  261. <h2>重复的线性渐变</h2>
  262. <div id="grad13"></div>
  263. <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
  265. <br><br>
  267. <h2>径向渐变 - 颜色结点均匀分布</h2>
  268. <div id="grad14"></div>
  269. <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
  271. <h2>径向渐变 - 颜色结点不均匀分布</h2>
  272. <div id="grad15"></div>
  273. <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
  275. <h2>径向渐变 - 形状</h2>
  276. <p><strong>椭圆形 Ellipse（默认）：</strong></p>
  277. <div id="grad16"></div>
  279. <p><strong>圆形 Circle：</strong></p>
  280. <div id="grad17"></div>
  281. <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
  284. <h2>径向渐变 - 不同尺寸大小关键字的使用</h2>
  286. <p><strong>closest-side：</strong></p>
  287. <div id="grad18"></div>
  288. <p><strong>farthest-side：</strong></p>
  289. <div id="grad19"></div>
  290. <p><strong>closest-corner：</strong></p>
  291. <div id="grad20"></div>
  292. <p><strong>farthest-corner（默认）：</strong></p>
  293. <div id="grad21"></div>
  295. <h2>重复的径向渐变</h2>
  296. <div id="grad22"></div>
  298. <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
  300. </body>
  301. </html>

分类: web

标签:   css  

微信号：腾讯云折扣返现

技术讨论QQ群： 863102326

作者: catherine

User Image

搜索

标签

study ab amap apache apahe awk aws bat centos CFS chrome cmd cnpm composer consul crontab css curl cygwin devops di docker docker,docker-compose ethereum excel fiddler fluentd framework front-end git gitgui github glide go golang gorm grafana gzip ioc item2 iterm2 javascript jenkins jsonp kafka laradock laravel larval linux liunux log mac mac, wi-fi macos magento mariaDB minikube mongoDB msp mysql netbeans nginx nodejs nohup npm nsq oracle php php-fpm php7 phpstorm php扩展 Protobuf python redis scp server shell soap socket socket5 sql sre ssdb ssh ssl study sublime swift system td-agent uml v2ray vagrant vagrnat vim vpn vue vue.js webpack webrtc websocket webtatic windows windows7 word wps xdebug yarn yii2 yum zookeeper 世界国家 互联网 以太坊 分类 前端 小程序 打印机 排序算法 搞笑 权限 粤语 缓存 网络 虚拟机 视频 设计模式 项目管理
热门文章
友情链接