文本实现斑马线效果

<style>

　　p {

	font-size: 17px;

	line-height: 25px;

	background-color: antiquewhite;

	background-image: linear-gradient(#99999 50%, transparent 0);

	background-size: auto 50px;

	background-origin: content-box;

      }

</style>

<body>

　　<p>咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕</p>

</body>

　　表格实现斑马线效果

<style>

　　tr{

	background: #ffffff;

	width: 1.25rem;

	height: 1.875rem;

　　　　}

　　tr:nth-child(2n) {

　　　　background: #E9E9E9;

　　　　}

</style>

<body>

　　<table>

　　　　<tr>

　　　　　　<td>1</td><td>2</td><td>3</td><td>4</td>

　　　　</tr>

　　　　<tr>

　　　　　　<td>1</td><td>2</td><td>3</td><td>4</td>

　　　　</tr>

　　　　<tr>

　　　　　　<td>1</td><td>2</td><td>3</td><td>4</td>

　　　　</tr>

　　</table>
</body>

　　

css实现斑马线效果的更多相关文章

  1. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  2. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  3. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  4. CSS 边框 阴影 效果

    CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...

  5. Css实现透明效果，兼容IE8

    Css实现透明效果,兼容IE8 >>>>>>>>>>>>>>>>>>>>> ...

  6. HTML与CSS简单页面效果实例

    本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...

  7. css 实现评分效果

    css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由  background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上 ...

  8. 纯 CSS 实现波浪效果！

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

  9. React 系列教程 1：实现 Animate.css 官网效果

    前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就 ...

随机推荐

  1. 珍珠x

    题目描述 有n颗形状和大小都一致的珍珠,它们的重量都不相同.n为整数,所有的珍珠从1到n编号.你的任务是发现哪颗珍珠的重量刚好处于正中间,即在所有珍珠的重量中,该珍珠的重量列(n+1)/2位.下面给出 ...

  2. Spring Boot教程（四）接收上传的multi-file的文件

    构建工程 为例创建一个springmvc工程你需要spring-boot-starter-thymeleaf和 spring-boot-starter-web的起步依赖.为例能够上传文件在服务器,你需 ...

  3. phpcms v9 更改首页

    phpcms v9的默认首页是(域名/index.php?m=content&c=index&a=init)那为什么你直接敲一个域名它就自己进 去了呢,其实在caches-->c ...

  4. vue 在移动端实现红包雨 （兼容性好）

    下面是代码:<template>    <div class="ser_home">        <ul class="red_packe ...

  5. AI-人工智能/机器学习 seetafaceJNI

    基于中科院seetaface2进行封装的JAVA人脸识别库,支持人脸识别.1:1比对.1:N比对. 项目介绍 基于中科院seetaface2进行封装的JAVA人脸识别算法库,支持人脸识别.1:1比对. ...

  6. YV12和NV12格式

    害怕搞忘 直接保存图片

  7. learning webrtc 使用node.js

    第二章 有使用node.js创建静态服务器的步骤 不过不够详细 下面以Windows为例 1.到官方网站下载安装包 然后安装 2.用管理员权限启动命令行 3.命令行窗口执行npm config set ...

  8. cmake使用2

    CMake支持大写.小写.混合大小写的命令. . 添加头文件目录INCLUDE_DIRECTORIES 语法:include_directories([AFTER|BEFORE] [SYSTEM] d ...

  9. Ubuntu - apt 下载源设置为阿里的源

    # 备份 sources.list cp /etc/apt/sources.list /etc/apt/sources.list.bak # 切换为阿里的源 echo "deb http:/ ...

  10. windows下 文件资源管理器 的操作

    alt + d 可以直接把光标移动到地址栏 shift + f10 可以触发右键, 后面就可以用键盘操作右键中的内容了 ( 如打开vscode alt + 空格 可以弹出窗口的菜单栏 ( 控制最大化 ...