css生成可控虚线的步骤-创新互联-成都快上网建站

css生成可控虚线的步骤-创新互联

css生成可控虚线的步骤

创新互联公司从2013年创立,先为广昌等服务建站,广昌等地企业,进行企业商务咨询服务。为广昌企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

目的:

生成如下图所示虚线

css生成可控虚线的步骤

实现方式

实现方式,有的人用多个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生成可控虚线的详细内容,更多请关注创新互联成都网站设计公司其它相关文章!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


新闻名称:css生成可控虚线的步骤-创新互联
当前链接:http://kswjz.com/article/hgsgd.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流