CSS 实现斑马条纹
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 实现斑马条纹的更多相关文章
- 【table】给table表格设置一个通用的css3样式(默认有斑马条纹)
/* = 表格(默认有斑马条纹) ------------------------------------------ */ .data-table { margin: 10px 0; } .data ...
- CSS3 斑马条纹.html
hvkhujluhijo hvkhujluhijo hvkhujluhijo hvkhujluhijo hvkhujluhijo <!DOCTYPE html> <html> ...
- css揭秘--笔记(未完)
第0章 关于本书 1, 本书要用到一个工具函数————$$(),它可以让我们更容易获取和遍历所有匹配特定css选择符的dom元素: function $$(selector,context){ con ...
- 拥有的50个CSS代码片段(上)
1. CSS 重置 ;;;font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-box-si ...
- ASP.NET MVC使用Bootstrap系统(2)——使用Bootstrap CSS和HTML元素
阅读目录 Bootstrap 栅格(Grid)系统 Bootstrap HTML元素 Bootstrap 验证样式 ASP.NET MVC创建包含Bootstrap样式编辑模板 小结 Bootstra ...
- CSS实用的代码段
摘抄的一些代码还有自己总结的常用的代码~ 1>浏览器样式统一 *{ margin:0px; padding:0px; } 浏览器样式统一 2>清除浮动的方法 3>跨浏览器设置透明度 ...
- Bootstrap CSS 描述
<!DOCTYPE html><html lang="zh-CN"><head> <!--定于内容,和内容的编码格式--> < ...
- 使用BootStrap框架设置全局CSS样式
一.排版 标题 HTML 中的所有标题标签,<h1> 到 <h6> 均可使用.另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式. & ...
- Bootstrap3 表格-条纹状表格
通过 .table-striped 类可以给 之内的每一行增加斑马条纹样式. 跨浏览器兼容性 条纹状表格是依赖 :nth-child CSS 选择器实现的,而这一功能不被 Internet Explo ...
随机推荐
- SecureCRT连接(内网和外网)虚拟机中的Linux系统(Ubuntu)
最近在学习Linux,看了网上很多SecureCRT连接本地虚拟机当中的Linux系统,很多都是需要设置Linux的配置文件,有点繁琐,所以自己就摸索了一下,把相关操作贴出来分享一下. SecureC ...
- python 面向对象二 类和实例
一.类和实例 面向对象最重要的概念就是类(Class)和实例(Instance),必须牢记类是抽象的模板,比如Student类,而实例是根据类创建出来的一个个具体的“对象”,每个对象都拥有相同的方法, ...
- 洛谷 P4014 分配问题 【最小费用最大流+最大费用最大流】
其实KM更快--但是这道题不卡,所以用了简单粗暴的费用流,建图非常简单,s向所有人连流量为1费用为0的边来限制流量,所有工作向t连流量为1费用为0的边,然后对应的人和工作连(i,j,1,cij),跑一 ...
- python的安装教学
1.首先登陆到python的官方网站 https://www.python.org/ 2.鼠标放在Download上,点击下面对应的型号,我的是Windows 3.点击Windows到此页面,点击3. ...
- Vue的响应式原理
Vue的响应式原理 一.响应式的底层实现 1.Vue与MVVM Vue是一个 MVVM框架,其各层的对应关系如下 View层:在Vue中是绑定dom对象的HTML ViewModel层:在Vue中是实 ...
- Go 使用自定义包(package)
自定义包的分为两种: 1.同目录下的包: 2.不同目录下的包: *经测试,同目录下是不可以用不同包的文件的 同目录下的包: 不同文件中的变量和函数都可以直接访问 不同目录下的包: 1.把要在自定义包外 ...
- [POI2007]对称轴osi
Description FGD小朋友--一个闻名遐迩的年轻数学家--有一个小MM,yours.FGD小朋友非常喜欢他的MM,所以他很乐意帮助他的MM做数学作业.但是,就像所有科学的容器一样,FGD的大 ...
- 题解报告:hdu 4704 Sum(扩展欧拉定理)
Problem Description Sample Input 2 Sample Output 2 Hint 1. For N = 2, S(1) = S(2) = 1. 2. The input ...
- 题解报告:hdu1205吃糖果(插空法)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1205 Problem Description HOHO,终于从Speakless手上赢走了所有的糖果, ...
- Android Dialogs(3)警示Dialog教程[创建,单选,复选,自定义]等等
本节内容 1. Building an Alert Dialog 2. Adding buttons 3. Adding a list 4. Adding a persistent multiple- ...