zoukankan      html  css  js  c++  java
  • 纯css径向渐变(CSS3Gradient) 鲁中O

    渐变

    一、CSS3的径向渐变

    效果图网址:http://www.spritecow.com 图像拼接技术

    CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。

    html代码:

    1 <h1>Hold the front page</h1>
    2 <p>Now you get the nitty-gritty of the story.</p>
    3 <p>The most important information is delivered first.</p>
    4 <h1>Extra!Extra!</h1>
    5 <p>Further developments are unfolding.</p>
    6 <p>You can read all about it here.</p>

    css代码:

    1 *{margin:0; padding:0;}
    2 html{ height:100%;
    3      background:-webkit-radial-gradient(center center,circle cover,#0091d5 0%,#0091d5 15%,#004a86 100%);
    4      background: -moz-radial-gradient(center center,circle cover,#0091d5 0%,#0091d5 15%,#004a86 100%);
    5      background: -ms-radial-gradient(center center,circle cover,#0091d5 0%,#0091d5 15%,#004a86 100%)
    6      background: -o-radial-gradient(center center,circle cover,#0091d5 0%,#0091d5 15%,#004a86 100%)}
    7 body{ background:url(index.png); height:100%; color:#3CC;}

    注释:radial:[ˈreɪdiəl] 径向的。  gradient:[ˈgreɪdiənt] 倾斜,梯度,陡度。circle:['sɜ:kl]

    二、线性渐变在Mozilla下的应用

    语法:

    1 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

    参数:其共有三个参数,第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。如图所示:

    根据上面的介绍,我们先来看一个简单的例子:

    HTML:

    1 <div class="example example1"></div>

    CSS:

    1 .example { width: 150px;  height: 80px; }

    现在我们给这个div应用一个简单的渐变样式:

    1 .example1 {
    2    background: -moz-linear-gradient( top,#ccc,#000);
    3 }

    效果如下:

    注:这个效果暂时只有在Mozilla内核的浏览器下才能正常显示。

  • 相关阅读:
    SDOI2017 R2泛做
    类似静态区间逆序对的题的一些做法
    友链&&日记
    注意事项以及一些奇怪的姿势
    关于各种算法以及好的blog的整理(持续更新)
    PKUSC2019游记
    洛谷P5398 [Ynoi2018]GOSICK(二次离线莫队)
    洛谷P4887 第十四分块(前体)(二次离线莫队)
    [51nod]1678 lyk与gcd(莫比乌斯反演)
    LOJ#557. 「Antileaf's Round」你这衣服租来的吗(FHQ Treap+珂朵莉树)
  • 原文地址:https://www.cnblogs.com/guozh/p/3900850.html
Copyright © 2011-2022 走看看