CSS自定义虚线长度

浏览器提供的dashed border画出来一直是一个样式，不能个性化定制虚线的长度以及间距，所以用这个方法画出可个性化定制的虚线。

background-image中，linear-gradient的第三个参数可以调整虚线每一段的长度显示百分比，结合background-size的第二个值（可设置虚线每一段总长度）使用。两者结合就可以调整虚线每一段之间的间距大小。
background-size的第一个值可以调整虚线的宽度。（可以设为100%，直接继承元素的宽度width）

  .division {width: 100%;margin: 30px 0;height: 1px;background-image: linear-gradient(to right,#ededed 0%,#ededed 50%,transparent 50%);background-size: 8px 1px;background-repeat: repeat-x;}

CSS自定义虚线长度相关推荐

css自定义虚线（可设置虚线间隔）模拟虚线
.line {width: 2rpx;height: 100%;background: linear-gradient(to bottom, #9E9E9E 0%, #9E9E9E 50%,trans ...
css自定义虚线（可设置虚线间隔）
.line {width: 2rpx;height: 100%;background: linear-gradient(to bottom, #9E9E9E 0%, #9E9E9E 50%,trans ...
html 一条虚线,css长条虚线
CSS如何定义一条水平虚线? 需要准备的材料分别有:电脑.浏览器.html编辑器. 首先,打开html编辑器,新建html文件,例如:index.html. 在index.html中的标签中,输入cs ...
【CSS学习】自定义虚线大小样式
虚线设置两种:1.border 里的 dashed:2. 利用div自定义圆设置块元素的border-radius属性设置边角曲率虚线圆源代码 <h1>border属性dashed ...
css中字体下划线样式,css下划线浅谈css自定义下划线
使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...
jquery设置video的宽度_jQ效果：jQuery和css自定义video播放控件
下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...
CSS设置下划线对齐方式,如何巧妙利用CSS自定义网页下划线样式
如何巧妙利用CSS自定义网页下划线样式 CSS为网页设计者们提供了丰富而灵活的页面元素表现形式的控制手段.但是,或许你可能注意到了,对于下划线,CSS提供的可选操作却不是很多.一般情况下,人们看到的下 ...
从Chrome中的css自定义样式按钮中删除蓝色边框
本文翻译自:Remove blue border from css custom-styled button in Chrome I'm working on a web page, and I wa ...
使用CSS将文字长度限制为n行
是否可以使用CSS将文本长度限制为" n"行(或在垂直溢出时将其剪切). text-overflow: ellipsis; 仅适用于1行文字. 原文: 纳图克足癣,阿里卡姆,克拉斯 ...

CSS自定义虚线长度

CSS自定义虚线长度相关推荐

最新文章

热门文章