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);效果图如下:
     
     
     
  • 相关阅读:
    编程思想之正则表达式
    SQL查询顺序
    hibernate inverse属性的作用
    介绍一下Hibernate的二级缓存
    JSON数据
    你没玩过的全新版本!Win10这些骚操作你知多少
    VSCode 小鸡汤 第01期
    Editor REST Client
    k8s常用命令
    【项目3-2】多肉植物网站
  • 原文地址:https://www.cnblogs.com/wangyuanyuanlovexuanxuan/p/7767253.html
Copyright © 2011-2022 走看看