Part.1 linear-gradient()

linear-gradient() 函数用于创建一个线性渐变的 "图像"。为了创建一个线性渐变,你需要设置一个起始点和一个方向(指定为一个角度)的渐变效果;还要定义终止色。

又因为其结果属于  <gradient> 数据类型,是一种特别的  <image> 数据类型,所以可以通过 background-size 来控制渐变的大小

Part.2 实现斑马条纹

HTML:

 <div style="width: 500px;
height: 400px;
margin: 10% auto;
background-image: linear-gradient(0deg, #000000 50%, #ffffff 50%);
background-size: 100% 50px">
</div>
效果如下:

Part.3 斑马条纹多样性

3.1 不等宽斑马条纹

上述示例展示为等宽斑马条纹,那如何不等宽呢?easy!!!

只需改变 linear-gradient() 函数的中值即可。

如:将上述示例中的  linear-gradient(0deg, #000000 50%, #ffffff 50%)  改为  linear-gradient(0deg, #000000 70%, #ffffff 0);

效果如下:

3.2 垂直斑马条纹

如何实现垂直斑马条纹?

1. 改变 linear-gradient() 函数中的度数 (deg的值)。

2. 改变 background-size 的值

如:将上述示例中的  linear-gradient(0deg, #000000 50%, #ffffff 50%)  改为  linear-gradient(90deg, #000000 50%, #ffffff 50%);

将上述示例中的  background-size: 100% 50px  改为  background-size: 50px  100%;

效果如下:

3.3  45deg 斑马条纹

如:将上述示例中的  linear-gradient(0deg, #000000 50%, #ffffff 50%)  改为  linear-gradient(45deg, #000000 50%, #ffffff 50%);

将上述示例中的  background-size: 100% 50px  改为  background-size: 50px  50px;

效果1如下:

如:将上述示例中的  linear-gradient(0deg, #000000 50%, #ffffff 50%)  改为 linear-gradient(45deg, #000000 25%, #ffffff 0, #ffffff 50%, #000000 0, #000000 75%, #ffffff 0);

将上述示例中的  background-size: 100% 50px  改为  background-size: 50px  50px;

效果2 如下:

CSS 实现斑马条纹的更多相关文章

  1. 【table】给table表格设置一个通用的css3样式(默认有斑马条纹)

    /* = 表格(默认有斑马条纹) ------------------------------------------ */ .data-table { margin: 10px 0; } .data ...

  2. CSS3 斑马条纹.html

    hvkhujluhijo hvkhujluhijo hvkhujluhijo hvkhujluhijo hvkhujluhijo <!DOCTYPE html> <html> ...

  3. css揭秘--笔记(未完)

    第0章 关于本书 1, 本书要用到一个工具函数————$$(),它可以让我们更容易获取和遍历所有匹配特定css选择符的dom元素: function $$(selector,context){ con ...

  4. 拥有的50个CSS代码片段(上)

    1. CSS 重置 ;;;font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-box-si ...

  5. ASP.NET MVC使用Bootstrap系统(2)——使用Bootstrap CSS和HTML元素

    阅读目录 Bootstrap 栅格(Grid)系统 Bootstrap HTML元素 Bootstrap 验证样式 ASP.NET MVC创建包含Bootstrap样式编辑模板 小结 Bootstra ...

  6. CSS实用的代码段

    摘抄的一些代码还有自己总结的常用的代码~ 1>浏览器样式统一 *{ margin:0px; padding:0px; } 浏览器样式统一 2>清除浮动的方法 3>跨浏览器设置透明度 ...

  7. Bootstrap CSS 描述

    <!DOCTYPE html><html lang="zh-CN"><head> <!--定于内容,和内容的编码格式--> < ...

  8. 使用BootStrap框架设置全局CSS样式

    一.排版 标题 HTML 中的所有标题标签,<h1> 到 <h6> 均可使用.另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式. & ...

  9. Bootstrap3 表格-条纹状表格

    通过 .table-striped 类可以给 之内的每一行增加斑马条纹样式. 跨浏览器兼容性 条纹状表格是依赖 :nth-child CSS 选择器实现的,而这一功能不被 Internet Explo ...

随机推荐

  1. SecureCRT连接(内网和外网)虚拟机中的Linux系统(Ubuntu)

    最近在学习Linux,看了网上很多SecureCRT连接本地虚拟机当中的Linux系统,很多都是需要设置Linux的配置文件,有点繁琐,所以自己就摸索了一下,把相关操作贴出来分享一下. SecureC ...

  2. python 面向对象二 类和实例

    一.类和实例 面向对象最重要的概念就是类(Class)和实例(Instance),必须牢记类是抽象的模板,比如Student类,而实例是根据类创建出来的一个个具体的“对象”,每个对象都拥有相同的方法, ...

  3. 洛谷 P4014 分配问题 【最小费用最大流+最大费用最大流】

    其实KM更快--但是这道题不卡,所以用了简单粗暴的费用流,建图非常简单,s向所有人连流量为1费用为0的边来限制流量,所有工作向t连流量为1费用为0的边,然后对应的人和工作连(i,j,1,cij),跑一 ...

  4. python的安装教学

    1.首先登陆到python的官方网站 https://www.python.org/ 2.鼠标放在Download上,点击下面对应的型号,我的是Windows 3.点击Windows到此页面,点击3. ...

  5. Vue的响应式原理

    Vue的响应式原理 一.响应式的底层实现 1.Vue与MVVM Vue是一个 MVVM框架,其各层的对应关系如下 View层:在Vue中是绑定dom对象的HTML ViewModel层:在Vue中是实 ...

  6. Go 使用自定义包(package)

    自定义包的分为两种: 1.同目录下的包: 2.不同目录下的包: *经测试,同目录下是不可以用不同包的文件的 同目录下的包: 不同文件中的变量和函数都可以直接访问 不同目录下的包: 1.把要在自定义包外 ...

  7. [POI2007]对称轴osi

    Description FGD小朋友--一个闻名遐迩的年轻数学家--有一个小MM,yours.FGD小朋友非常喜欢他的MM,所以他很乐意帮助他的MM做数学作业.但是,就像所有科学的容器一样,FGD的大 ...

  8. 题解报告:hdu 4704 Sum(扩展欧拉定理)

    Problem Description Sample Input 2 Sample Output 2 Hint 1. For N = 2, S(1) = S(2) = 1. 2. The input ...

  9. 题解报告:hdu1205吃糖果(插空法)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1205 Problem Description HOHO,终于从Speakless手上赢走了所有的糖果, ...

  10. Android Dialogs(3)警示Dialog教程[创建,单选,复选,自定义]等等

    本节内容 1. Building an Alert Dialog 2. Adding buttons 3. Adding a list 4. Adding a persistent multiple- ...