前言

css生成虚线，前端小儿科。一般都会用border来实现，不做深入考究，但是生成如下虚线？如何操作？

实现方式

实现方式，有的人用多个span生成，一个小圆点就是一个span，这样是可以，但是整个状态改变比较麻烦，有什么方式生成可以控制的虚线呢？

生成dashed

生成横向线

生成dashed虚线，一般是通过linear-gradient + background-size实现的，实现代码如下：

height: 2px;
background: linear-gradient(to right, #000000, #000000 7.5px, transparent 7.5px, transparent);
background-size: 15px 100%;

height，控制虚线的高度，linear-gradient和background-size控制间距和步长

生成竖向线

竖向线和横向线正好相反，倒过来就可以了

width: 2px;
background: linear-gradient(to bottom, #000000, #000000 7.5px, transparent 7.5px, transparent);
background-size: 100% 15px;

延伸

横向线和竖向线都有了，那么是不是就有了加减号了？

css生成加减号按钮

.btn {
    display: inline-block;
    background: #f0f0f0 no-repeat center;
    border: 1px solid #d0d0d0;
    width: 24px; height: 24px;    
    border-radius: 2px;
    box-shadow: 0 1px rgba(100,100,100,.1);
    color: #666;
    transition: color .2s, background-color .2s;
}
.btn:active {
    box-shadow: inset 0 1px rgba(100,100,100,.1);
}
.btn:hover {
    background-color: #e9e9e9;
    color: #333;
}
.btn-plus {
    background-image: linear-gradient(to top, currentColor, currentColor), linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px, 2px 10px;
}
.btn-minus {
    background-image: linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px;
}
<a href="javascript:" class="btn btn-plus" role="button" title="增加"></a>
<input value="1" size="1">
<a href="javascript:" class="btn btn-minus" role="button" title="减少"></a>

生成dotted

上面是生成线，是没有圆角的，假如生成小圆点怎么生成呢？

如下图

同样，用radial-gradient渐变可以生成

代码如下：

height: 29px;
background: radial-gradient(#000000, #000000 4px, transparent 4px, transparent);
background-size: 29px 100%;

备注： 这里，小圆点的宽高是由radial-gradient得到的 height 变小，小圆点就会压扁，变成椭圆，如下图

扩展

关于CSS3 gradient渐变 可以实现很多其他的效果，例如空心对话框的三角。

如下：

代码如下：

width: 6px; height: 6px;
background: linear-gradient(to top, #ddd, #ddd) no-repeat, linear-gradient(to right, #ddd, #ddd) no-repeat, linear-gradient(135deg, #fff, #fff 6px, hsla(0,0%,100%,0) 6px) no-repeat;
background-size: 6px 1px, 1px 6px, 6px 6px;
transform: rotate(-45deg);

这种空心三角实现用渐变是很不错的，实心三角，肯定首选border，空心三角也可以用birder2边，通过旋转来实现，但是有一定的局限性。

总结

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS预编语言在前端里的预编处理器有哪些

  Css 作为一门标记性语言，语法相对简单，对使用者的要求较低，但同时也带来一些问题需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 Css 编写经验而很难写出组织良好且易于维护的 Css 代...

• CSS中单位的百分比用法及含义是怎样的

  CSS支持多种单位形式，如百分比、px、pt、rem等，百分比和px是常用的单位，随着移动端和响应式的流行，rem、vh、vw也开始普遍使用，这些单位你可能未必知道，想了解？可以戳此文：CSS：7个你可能不认识的单位。今天在SegmentFault社区碰到了两个关于百分比计算的问题，一个是在translate中使用百分比的时候，是相对于哪个DO ...

• 在CSS中清除左右浮动的方法是什么

  在css中，可以利用clear属性清除左右浮动，该属性的作用就是规定元素的哪一侧不允许其他浮动元素，当属性的值为“both”时，在元素的左右两侧均不允许浮动元素，也就是清除左右浮动，语法为“元素{clear:both;}”。

• CSS pointer-events属性的用法是怎样，应用场景是什么

  这篇文章主要介绍了CSS pointer-events属性的使用,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

• CSS的clip-path属性怎样用?浅谈clip-path使用示例

  这篇文章给大家分享的是CSS的clip-path属性的使用。clip-path属性能实现不规则图形的显示，在剪裁工具中有很大的用处，接下来给大家介绍以下各示例，对大家了解clip-path属性的使用有一定的参考价值，感兴趣的朋友接下来一起跟随小编看看吧。