如何利用css生成可控虚线

来源:07素材网 04月27日 21:26

如何利用css生成可控虚线


目的:

生成如下图所示虚线

如何利用css生成可控虚线

实现方式

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

(视频教程推荐:css视频教程

生成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快速入门

以上就是如何利用css生成可控虚线的详细内容,更多请关注php中文网其它相关文章!

原文出处:https://www.php.cn/css-tutorial-448120.html
版权声明:本文来源地址若非本站均为转载,若侵害到您的权利,请及时联系我们,我们会在第一时间进行处理。

头条

在使用SQLite3时遇到的几个坑

在使用SQLite3时遇到的几个坑

《本打算在SQLite3数据库里执行一个查询语句,使用的是php语言,起初遇到的是权限问题: permission denied,因为SQLite3数据库文件和PHP执行者属于两个不同的用户,首先需要对这个文件执行mode 777的权限开放,然后,又遇到了下面这样的PHP错误