zoukankan      html  css  js  c++  java
  • CSS3 线性渐变

    用纯css写出这个背景,代码如下
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #div1
    {
    padding:35px;
    border:4px solid transparent;
    background-origin:border-box;
    background-clip:padding-box,border-box;
    background-image:linear-gradient(#eee,#eee),linear-gradient(#FBF6DF, #F4E779);
    }
    </style>
    </head>
    <body>
    <div id="div1">
    这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
    </div>
    </body>
    </html>
    注意!其中background-origin:规定背景图片的定位区域。
    background-clip:规定背景的绘制区域。
    background-image:linear-gradient(#eee,#eee),linear-gradient(#FBF6DF, #F4E779);
    第一个linear-gradient(#eee,#eee)是用来设置内容区域的颜色,也就是说如果
    background-image:linear-gradient(#FBF6DF, #F4E779);则效果图如下:
     
     把两个linear-gradient换一下位置
    background-image:linear-gradient(#FBF6DF,#F4E779),linear-gradient(#eee,#eee);效果图如下:
     
     
     
  • 相关阅读:
    winston写日志(译)
    H5打字机特效
    Flutter 手指放大 平移 旋转 Widget
    51nod1432【贪心】
    死锁的例子
    C# SpinLock用法。
    鼓音效
    rm-rf
    cdoj 1334 郭大侠与Rabi-Ribi Label:贪心+数据结构
    1092 回文字符串(51nod)
  • 原文地址:https://www.cnblogs.com/wangyuanyuanlovexuanxuan/p/7767253.html
Copyright © 2011-2022 走看看