基于CSS3线性渐变实现的虚线CSS生成工具实例页面

回到相关文章 »

效果：

HTML代码：
<div class="dashed"></div>
CSS代码：
效果预览：
参数控制：

选择实虚比例：

选择虚线步幅(3-30)：

选择虚线宽度(1-10)：

选择虚线颜色：

代码：

CSS代码：
.dashed { 
    height: 1px;
    background: linear-gradient(to right, #000, #000 2px, transparent 2px, transparent);
    background-size: 4px 100%;
}
HTML代码：
<div class="dashed"></div>