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包 ...
随机推荐
- npm淘宝镜像的设置和删除
设置 npm config set registry https://registry.npm.taobao.org npm config set disturl https://npm.taobao ...
- JMeter实现Oracle参数化(1)
http://www.ithao123.cn/content-10469577.html
- Python学习(一) —— 基础
一.计算机的组成 计算机硬件主要由cpu.内存.硬盘组成. cpu:相当于人类的大脑,用于计算 内存:临时加载数据或者程序.缺点:断电即消失. 硬盘:用于永久存放数据或者程序.缺点:运行速度慢. 二. ...
- Linux安装Tomcat-Nginx-FastDFS-Redis-Solr-集群——【第四集之安装Linux】
1,确保Linux镜像的路径存在 2,启动 3,在真实机情况下,进入BIOS修改安装操作系统的路径[记住:虚拟机不需要这一步.] 如果是真实机安装Linux,默认是从硬盘中安装,而不是从光盘.这就需要 ...
- 20165235 祁瑛 2018-4 《Java程序设计》第九周学习总结
20165235 祁瑛 2018-4 <Java程序设计>第九周学习总结 教材学习内容总结 URL类 UR类是java.net包中的一个重要类,使用URL创建的对象的应用程序称作称作客户端 ...
- Tp-validate进阶
阶段1:基础 application/controller/v1/Banner.php <?php namespace app\api\controller\v1; use think\Cont ...
- 关于mybatis缓存配置讲解
一级缓存: 一级缓存是默认的. 测试:在WEB页面同一个查询执行两次从日志里面看同样的sql查询执行两次. 2次sql查询,看似我们使用了同一个sqlSession,但是实际上因为我们的dao继承了S ...
- MLR:输入两个向量,得出两个向量之间的相关度—Jason niu
import numpy as np from astropy.units import Ybarn import math from statsmodels.graphics.tukeyplot i ...
- POJ_2376_Cleaning Shifts【贪心】【区间覆盖】
题目链接 题目大意: 有一些奶牛,每只奶牛负责一个时间段.问覆盖完全部的时间段最少需要多少只奶牛.若不能全部覆盖,输出-1. #include <cstdio>#include <a ...
- Linux学习笔记 3 权限篇
chmod 查看命令 ls -l - rwx r_x r_x 4 user grop ...