zoukankan      html  css  js  c++  java
  • CSS颜色渐变

    CSS颜色渐变是使颜色之间的过渡更加平稳。

    1、渐变的方式有两类:

         线性(Liner Gradients)、圆形(Radial Gradients)

    2、基本语法:

         1 background: linear-gradient(渐变的方向,渐变的颜色1,渐变的颜色2,渐变的颜色3,...); 

         1 background: radial-gradient(渐变的方向,渐变的颜色1,渐变的颜色2,渐变的颜色3,...); 

    3、

    1)、线性:

    代码:

    1 <div>
    2     <h5 style="text-align: center">线性渐变</h5>
    3     <p>从上到下</p>
    4     <div style=" 200px;height: 200px;background: linear-gradient(to bottom,red,blue);"></div>
    5     <p>从左到右</p>
    6     <div style=" 200px;height: 200px;background: linear-gradient(to right,red,blue);"></div>
    7     <p>对角线(左上到右下)</p>
    8     <div style=" 200px;height: 200px;background: linear-gradient(to bottom right,red,blue)"></div>
    9 </div>

    效果图:

    2)、圆形:

    代码:

     1 <div>
     2     <h5 style="text-align: center">线性渐变</h5>
     3     <p>椭圆形</p>
     4     <div style=" 200px;height: 200px;background: radial-gradient(ellipse,red,blue);"></div>
     5     <p>圆形</p>
     6     <div style=" 200px;height: 200px;background: radial-gradient(circle,red,orange,yellow,blue);"></div>
     7     <p>椭圆形(多色)</p>
     8     <div style=" 200px;height: 200px;background: radial-gradient(ellipse,red,orange,yellow,green,blue,purple)"></div>
     9     <p>颜色不均匀分布</p>
    10     <div style=" 200px;height: 200px;background: radial-gradient(ellipse,red 10%,orange 20%,yellow 30%,green 40%)"></div>
    11 </div>

    效果图:

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

    更多细节可以参考css3渐变教程:http://www.runoob.com/css3/css3-gradients.html

  • 相关阅读:
    一个方法只做一件事
    日常-生活-学习-经验分享
    Python 用下划线作为变量前缀和后缀指定特殊变量
    浏览器渲染的基本原理
    七个对我最好的职业建议
    web性能优化
    Javascript 设计模式
    数据结构与算法 Javascript描述
    mysql计算连续天数,mysql连续登录天数,连续天数统计
    Oracle计算连续天数,计算连续时间,Oracle连续天数统计
  • 原文地址:https://www.cnblogs.com/gwcyulong/p/6349258.html
Copyright © 2011-2022 走看看