一、波浪线 ,常用

.info::before {
content: '';
position: absolute;
top: 30px;
width: 100%;
height: 0.25em; background:
linear-gradient(135deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%),
linear-gradient(45deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%);
background-size: 0.5em 0.5em;
background-repeat: repeat-x, repeat-x;
}

显示效果:

二、波浪线变形 xxx

修改div的高度和背景高度

.info::before {
content: '';
position: absolute;
top: 30px;
width: 100%;
height: 0.5em; background:
linear-gradient(135deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%),
linear-gradient(45deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%);
background-size: 0.5em 0.5em;
background-repeat: repeat-x, repeat-x;
}

显示效果:

三、波浪线 加粗

修改div 的高度和背景高度

.info::before {
content: '';
position: absolute;
top: 30px;
width: 100%;
height: 0.5em; background:
linear-gradient(135deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%),
linear-gradient(45deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%);
background-size: 1em 1em;
background-repeat: repeat-x, repeat-x;
}

显示效果:

更多:

HTML5 background-color和background-image问题共用问题

CSS网页布局垂直居中整理

CSS3 Flex布局整理(三)-项目属性

Css3实现波浪线效果1的更多相关文章

  1. Css3实现波浪效果3-静态波纹

    一.外框宽度等比例3个椭圆拼合 .container { position: absolute; width: 400px; height: 200px; border: 5px solid rgb( ...

  2. Css3实现波浪效果2

    一.不规则圆,旋转实现波浪效果 .info { width: 200px; height: 200px; ; background: #009A61; border-radius: 45%; colo ...

  3. C# 波浪线绘制

    波浪线效果如上 界面绘制操作 private Point? _startPoint = null; private void ContainerCanvas_OnPreviewMouseLeftBut ...

  4. 消除PyCharm中满屏的波浪线

    PyCharm使用了较为严格的PEP8的检查规则,如果代码命名不规范,甚至多出的空格都会被波浪线标识出来,导致整个编辑器里铺满了波浪线,右边的滚动条也全是黄色或灰色的标记线,很是影响编辑. 在网上看了 ...

  5. 如何去除pycharm中代码下的波浪线

    Pycharm中新建一个工程,如果不经过配置,在该工程下创建模块写代码,通常是有波浪线的,这样看着很不美观 如何解决这种问题,通常有两种方法 方法一:点击右下角的图标,会出现一个Highlightin ...

  6. 去除pycharm的波浪线

    PyCharm使用了较为严格的PEP8的检查规则,如果代码命名不规范,甚至多出的空格都会被波浪线标识出来,导致整个编辑器里铺满了波浪线,右边的滚动条也全是黄色或灰色的标记线,很是影响编辑.这里给大家分 ...

  7. Coreldraw绘制标准波浪线

    Coreldraw中如何绘制标准波浪线? 先画一根直线,单击工具栏中的“互动式工具组”,选择“互动式变形工具”, 再在弹出的属性栏中选择“拉链变形”,在幅度和频率中分别输入波形的波峰 到波底的值.波浪 ...

  8. IDEA去除掉虚线,波浪线,和下划线实线的方法

    初次安装使用IDEA,总是能看到导入代码后,出现很多的波浪线,下划线和虚线,这是IDEA给我们的一些提示和警告,但是有时候我们并不需要,反而会让人看着很不爽,这里简单记录一下自己的调整方法,供其他的小 ...

  9. IDEA在引入Maven项目后Dependencies中在出现红色波浪线

    解决方法: 移除pom.xml中相关依赖,再重新添加即可. 情况及具体解决方法如下: 1.在Maven Project中 Dependencies 出现红色波浪线,如图所示 2.查询本地仓库:jar包 ...

随机推荐

  1. npm淘宝镜像的设置和删除

    设置 npm config set registry https://registry.npm.taobao.org npm config set disturl https://npm.taobao ...

  2. JMeter实现Oracle参数化(1)

    http://www.ithao123.cn/content-10469577.html

  3. Python学习(一) —— 基础

    一.计算机的组成 计算机硬件主要由cpu.内存.硬盘组成. cpu:相当于人类的大脑,用于计算 内存:临时加载数据或者程序.缺点:断电即消失. 硬盘:用于永久存放数据或者程序.缺点:运行速度慢. 二. ...

  4. Linux安装Tomcat-Nginx-FastDFS-Redis-Solr-集群——【第四集之安装Linux】

    1,确保Linux镜像的路径存在 2,启动 3,在真实机情况下,进入BIOS修改安装操作系统的路径[记住:虚拟机不需要这一步.] 如果是真实机安装Linux,默认是从硬盘中安装,而不是从光盘.这就需要 ...

  5. 20165235 祁瑛 2018-4 《Java程序设计》第九周学习总结

    20165235 祁瑛 2018-4 <Java程序设计>第九周学习总结 教材学习内容总结 URL类 UR类是java.net包中的一个重要类,使用URL创建的对象的应用程序称作称作客户端 ...

  6. Tp-validate进阶

    阶段1:基础 application/controller/v1/Banner.php <?php namespace app\api\controller\v1; use think\Cont ...

  7. 关于mybatis缓存配置讲解

    一级缓存: 一级缓存是默认的. 测试:在WEB页面同一个查询执行两次从日志里面看同样的sql查询执行两次. 2次sql查询,看似我们使用了同一个sqlSession,但是实际上因为我们的dao继承了S ...

  8. MLR:输入两个向量,得出两个向量之间的相关度—Jason niu

    import numpy as np from astropy.units import Ybarn import math from statsmodels.graphics.tukeyplot i ...

  9. POJ_2376_Cleaning Shifts【贪心】【区间覆盖】

    题目链接 题目大意: 有一些奶牛,每只奶牛负责一个时间段.问覆盖完全部的时间段最少需要多少只奶牛.若不能全部覆盖,输出-1. #include <cstdio>#include <a ...

  10. Linux学习笔记 3 权限篇

    chmod 查看命令 ls -l -  rwx             r_x              r_x            4              user      grop    ...