条纹背景

https://github.com/FannieGirl/ifannie/
问题：条纹背景 在设觉设计中无处不在，我们真的可以用css 创建图案吗？

这一章相对还是比较复杂的哦！一起get.
首先我们做一个渐变的背景

横条背景

现在我们把这两个色标拉近一点

这样好像条纹背景 就出来了哦！不过这是横向的，是不是还可以竖线呢！肯定是可以的啦，看看多变的条纹背景

竖条背景

斜向背景

这样的条纹背景还是不够灵活的。还有更好的方案

liear-gradient() 和 radial-gradient() 还各有一个循坏的加强版：repeating-liear-gradient() 和 repeating-radial-gradient() 他们的工作方式是跟前两者类似的，但是不同点是：色标是无线循环重复的，直到填满整个背景。

灵活的同色系条纹

一般情况下，我们想要的条纹图案并不是由差异极大的几种颜色组成的，这些颜色往往属于同一色系，只是在明度方面有着轻微的差异

实例演示地址：https://jsfiddle.net/06sjmL6n/13/

后言：
如果你对基础的知识点已经很熟悉，你可以自动跳过。写上去的原因是查漏补缺，巩固一下基础。
如果有不对的地方，欢迎你来吐槽。
本文主要参考《CSS 揭秘》一书 以及w3school；
参考链接 ：http://www.w3school.com.cn/cssref/pr_background-clip.asp

[css 揭秘] ：CSS揭秘 技巧（五）：条纹背景的更多相关文章

  1. CSS揭秘 技巧（五）：条纹背景

    条纹背景 https://github.com/FannieGirl/ifannie/问题:条纹背景 在设觉设计中无处不在,我们真的可以用css 创建图案吗? 这一章相对还是比较复杂的哦!一起get. ...

  2. 用css实现条纹背景

    我先额外的说一下怎么用CSS绘制三角形: 绘制三角形是把边框加粗,将元素的宽高都设为0,让其余的边框颜色透明,下面我们来看实现的代码: 先把边框的颜色设置成不同颜色: #div{ border-col ...

  3. css条纹背景

    一. 水平条纹 1. 两种颜色: html <div class="stripe"></div> css .stripe{ width: 250px; he ...

  4. [CSS]《CSS揭秘》第四章——视觉效果

    投影 单侧投影 box-shadow:0px 10px 10px -5px black; 邻边投影 box-shadow:10px 10px 10px 2px black; 双侧投影 box-shad ...

  5. IT兄弟连 HTML5教程 CSS3揭秘 CSS简介

    HTML使用标签将内容放到网页上,也可使用元素和属性来控制简单的文档外观.如果希望更全面地控制Web页面的外观和布局,则需要使用层叠样式表(简写为CSS).CSS规范的工作原理在于允许用户制定一些规则 ...

  6. css条纹背景样式、及方格斜纹背景的实现

    一.横向条纹如下代码: background: linear-gradient(#fb3 %, #58a %) 上面代码表示整个图片的上部分20%和下部分20%是对应的纯色,只有中间的部分是渐变色.如 ...

  7. 使用css时的一些技巧及注意事项

    <!-- TITLE: 使用css时的一些技巧及注意事项 --> # CSS推荐书写顺序: 1. 位置属性(position, top, right, z-index, display, ...

  8. 学无止境的CSS(xHTML+CSS技巧教程资源大全)

    本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要 ...

  9. 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记

    [CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...

随机推荐

  1. [19/04/26-星期五] GOF23_结构型模式(桥接模式、组合模式)

    一.桥接模式(bridge) 场景:商城系统中常见的商品分类,以电脑为例,首先想到使用多层继承结构. —— 台式机(联想台式机.戴尔台式机.神舟台式机) 电脑    ——笔记本(联想笔记本.戴尔笔记本 ...

  2. 5、Dubbo-监控中心

    5.1).dubbo-admin 图形化的服务管理页面:安装时需要指定注册中心地址,即可从注册中心中获取到所有的提供者/消费者进行配置管理 5.2).dubbo-monitor-simple 简单的监 ...

  3. NodeManager 启动一会儿挂掉

    [root@hadoop1 hadoop-2.8.5]# less logs/yarn-root-nodemanager-hadoop1.log 查看日志发现  hostname配置错误 [root@ ...

  4. POJ 1703 Find them, Catch them（确定元素归属集合的并查集）

    Find them, Catch them Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 52925   Accepted: ...

  5. 轻量ORM-SqlRepoEx （十七）SqlRepoEx 2.30 版本更新说明

    .Net平台下兼容.NET Standard 2.0,一个实现以Lambda表达式转转换标准SQL语句,支持MySQL.SQL Server数据库方言,使用强类型操作数据的轻量级ORM工具,在减少魔法 ...

  6. 传递的值是this，在js里就不用再写$(this)

    <input class="editinput" value="${detail.earlymoneyrmb}" name="earlymone ...

  7. python自动化学习

    1.环境搭建 1.1 下载或拷贝整个PyAuthoTest到指定的目录,如D:\PyAuthoTest 1.2 安装Python2.7以及需要使用到的安装包列表如下 requests-2.10.0.t ...

  8. Leecode刷题之旅-C语言/python-387 字符串中的第一个唯一字符

    /* * @lc app=leetcode.cn id=387 lang=c * * [387] 字符串中的第一个唯一字符 * * https://leetcode-cn.com/problems/f ...

  9. SELinux初学者指南

    SELinux(Security Enhanced Linux)是美国国家安全局2000年发布的一种高级MAC(Mandatory Access Control,强制访问控制)机制,用来预防恶意入侵. ...

  10. 希尔伯特曲线——第八届蓝桥杯C语言B组（国赛）第三题

    原创 标题:希尔伯特曲线 希尔伯特曲线是以下一系列分形曲线 Hn 的极限.我们可以把 Hn 看作一条覆盖 2^n × 2^n 方格矩阵的曲线,曲线上一共有 2^n × 2^n 个顶点(包括左下角起点和 ...