用css怎样实现波浪线,Css3实现波浪线效果1

一、波浪线 ，常用

.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;

}

显示效果：

更多：

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

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

Css3实现波浪效果2

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

C# 波浪线绘制

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

消除PyCharm中满屏的波浪线

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

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

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

去除pycharm的波浪线

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

Coreldraw绘制标准波浪线

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

IDEA去除掉虚线，波浪线，和下划线实线的方法

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

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

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

随机推荐

计算几何 平面最近点对 nlogn分治算法 求平面中距离最近的两点

平面最近点对,即平面中距离最近的两点 分治算法: int SOLVE(int left,int right)//求解点集中区间[left,right]中的最近点对 { double ans; //an ...

查看w3wp进程占用的内存及.NET内存泄露,死锁分析--转载

一 基础知识 在分析之前,先上一张图: 从上面可以看到,这个w3wp进程占用了376M内存,启动了54个线程. 在使用windbg查看之前,看到的进程含有 *32 字样,意思是在64位机器上已32位方 ...

前端面试题和setTimeout异步

var len=4; while(len--){ setTimeout(function(){ alert(len); },0); alert(len); } 这个题目的答案我先说出来,读者请仔细考虑 ...

Docker(十一)：Docker实战部署HTTPS的Tomcat站点

1.选择基础镜像  docker pull tomcat:7.0-jre8 2.生成HTTPS证书 keytool -genkey -alias tomcat -keyalg RSA -keystor ...

最近面试 Java 后端开发的感受！

阅读本文大概需要 4.3 分钟. 首发:cnblogs.com/JavaArchitect/p/10011253.html 上周,密集面试了若干位Java后端候选人,工作经验在3到5年间.我的标准其实 ...

python学习之旅(四)

Python基础知识(3):基本数据类型之数字 一.基本数据类型 数字Number.字符串String.列表List.元组Tuple.集合Set.字典Dictionary 二.数字 Python3支持 ...

linux 编译ffmpeg 支持x264, x265

1. 前言 本教程涉及的ffmpeg, x264, x265 2. 环境依赖 2.1 删除系统中安装的ffmpeg等库 sudo apt-get --purge remove ffmpeg mplay ...

SQL Server 2008 R2 使用 PIVOT 错误

SQL Server 2008 R2 使用 PIVOT 错误! 'PIVOT' 附近有语法错误.您可能需要将当前数据库的兼容级别设置为更高的值,以启用此功能. 有关 ALTER DATABASE 的 ...

shell整数加法

http://blog.csdn.net/ll_0520/article/details/5959577 #plus #!/bin/sh let a=$1+$2 b=$[$1+$2] ((c=$1+$ ...