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;
}
显示效果:
更多:
HTML5 background-color和background-image问题共用问题
Css3实现波浪线效果1的更多相关文章
- 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包 ...
随机推荐
- 使用Phar来打包发布PHP程序
简单来说,Phar就是把Java界的jar概念移植到了PHP界. Phar可以将一组PHP文件进行打包,还可以创建默认执行的stub(或者叫做 bootstrap loader),Phar可以选择是否 ...
- 51Nod1675 序列变换 数论 莫比乌斯反演
原文http://www.cnblogs.com/zhouzhendong/p/8665675.html 题目传送门 - 51Nod1675 题意 给定序列$a,b$,让你求满足$\gcd(x,y)= ...
- String类型的转型
字符串类型的转型在java中常用的方法有标题中的三种. 简单介绍: 1.toString,需要保证调用这个方法的类.方法.变量不为null,否则会报空指针. 2.String.valueOf.这个方法 ...
- 【转】Java开发必须要知道的知识体系
Java Java是一门超高人气编程语言,拥有跨平台.面向对象.泛型编程等特性.在TIOBE编程语言排行榜中,连续夺得第一宝座,而且国内各大知名互联网公司,后端开发首选语言:非Java莫属.今天只是梳 ...
- P1025 数的划分 dfs dp
题目描述 将整数nn分成kk份,且每份不能为空,任意两个方案不相同(不考虑顺序). 例如:n=7n=7,k=3k=3,下面三种分法被认为是相同的. 1,1,51,1,5;1,5,11,5,1;5,1, ...
- Remmarguts' Date POJ - 2449 (A*搜索|k短路)
"Good man never makes girls wait or breaks an appointment!" said the mandarin duck father. ...
- HDU 3829 Cat VS Dog (最大独立集)【二分图匹配】
<题目链接> 题目大意: 动物园有n条狗.m头猫.p个小孩,每一个小孩有一个喜欢的动物和讨厌的动物.如今动物园要转移一些动物.假设一个小孩喜欢的动物在,不喜欢的动物不在,他就会happy. ...
- poj3311
poj3311我写的第一篇状压dp,调试了好久23333,其实状压就是二进制结合位运算,把整体的状态用二进制来表示,一般是0/1,用没用过或者走没走没走过的问题,其实这种思想在搜索中也有涉及过,与dp ...
- Adobe Premiere Pro生成峰值文件假死
一.正文 使用Adobe的Premiere Pro CC进行视频剪辑制作的时候,有的时候在右下角总会出现一个“自动生成峰值文件”的提示符,并跟随一个进度条: 大部分时候,这并不会引起什么问题.虽然我也 ...
- linux基础 用户(组)管理
修改/etc/shadow文件 1.chage -m MINDAYS USERNAME#设置密码修改最小天数2.chage -M MAXDAYS USERNAME#设置密码修改最大天数3.chage ...