一、波浪线 ,常用

.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. Nginx+Redis+Ehcache大型高并发高可用三层架构总结

    在生产环境中,对于高并发架构,我们知道缓存 是最重要的环节,对于大量的高并发.可以采用三层缓存架构来实现,也就是Nginx+Redis+Ehcache 对于中间件Nginx常来做流量分发,同事ngin ...

  2. net core体系-web应用程序-4net core2.0大白话带你入门-7asp.net core日志组件(Logger和Nlog)

    asp.net core日志组件   日志介绍 Logging的使用 1. appsettings.json中Logging的介绍 Logging的配置信息是保存在appsettings.json配置 ...

  3. Tomcat中文乱码解决办法

    有时候发现自己将中文编码后还是会存在乱码的情况,解决办法就是在Server.xml中的Connector结点,配置 URIEncoding="UTF-8"即可

  4. P1052 过河 线性dp

    题目描述 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一次跳过的距离都是正整数,我们可以把独木桥上青蛙可能到达的点看成数 ...

  5. IDEA控制台问题:At least one JAR was scanned for TLDs yet contained no TLD

    参考连接: https://www.cnblogs.com/interdrp/p/7763040.html 1.调整Tomcat对应类的log级别 2.观察Tomcat日志打印信息 3.调整${tom ...

  6. Aladdin and the Flying Carpet(唯一分解定理)

    题目大意:给两个数a,b,求满足c*d==a且c>=b且d>=b的c,d二元组对数,(c,d)和(d,c)属于同一种情况: 题目分析:根据唯一分解定理,先将a唯一分解,则a的所有正约数的个 ...

  7. HDU 1045 Fire Net 【二分图匹配】

    <题目链接> 题目大意: 这题意思是给出一张图,图中'X'表示wall,'.'表示空地,可以放置炮台,同一条直线上只能有一个炮台,除非有'X'隔开,问在给出的图中最多能放置多少个炮台. 解 ...

  8. a标签下划线

    页面中有一处box中的a标签都被加上了下划线,查找元素却没有找到css中的underline. 原因是 <a>标签默认是有下划线的,而一般看到的<a>标签链接中的下划线都被覆盖 ...

  9. spring mvc简单介绍xml版

    spring mvc介绍:其实spring mvc就是基于servlet实现的,只不过他讲请求处理的流程分配的更细致而已. spring mvc核心理念的4个组件: 1.DispatcherServl ...

  10. type__字符串