zoukankan      html  css  js  c++  java
  • CSS3条纹背景

    }最近在巩固CSS揭秘,在文档里看到几段代码觉得不错

    想拿来给大家分享一下

    用渐变几乎可以创建任何种类的几何图案,只不过这种方法不太实际,我们可能稍不留神就弄出一大块无法维护的代码

    当我们把多个渐变图案组合起来,让它们透过彼此的透明区域显现时,神奇的事情就发生了

    希望以下的可以帮助到你!

    div{

    500px;  /*宽*/

    height:500px;/*高*/

    background: white;/*背景颜色*/

    background-image: linear-gradient(90deg,rgba(200,0,0,.5) 50%, transparent 0),linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);/*背景图片:线性渐变(90度),色彩模式,背景透明*/

    background-size: 30px 30px;/*背景大小*/

    }

     效果图

     div{

    background: #58a;
    background-image:
    linear-gradient(white 1px, transparent 0),
    linear-gradient(90deg, white 1px, transparent 0);
    background-size: 30px 30px;

    }

     

     div{

    background: #655;
    background-image: radial-gradient(tan 30%, transparent 0),
    radial-gradient(tan 30%, transparent 0);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;

    }

     

    div{

    background: #eee;
    background-image:
    linear-gradient(45deg, #bbb 50%, transparent 0);
    background-size: 30px 30px;

    }

  • 相关阅读:
    Dockfile 使用 非root 用户运行容器
    Latex 小记
    Tmux 小技巧
    配置本地 overleaf
    arm板载ubuntu18.04系统安装QT4.8.7
    移植32位QT程序到ubuntu18.04
    TLS1.0禁用问题
    TLS1.0禁用问题
    Delphi程序“自杀”的有效办法
    Delphi7程序出现“EOSError code8-存储不足”问题的分析与解决
  • 原文地址:https://www.cnblogs.com/sy123456/p/6678897.html
Copyright © 2011-2022 走看看