《CSS3》田字网格背景(外实线内虚线)的实现

一、前言

记录一些有趣的CSS实现方式,总所周知,当一段效果可以通过CSS实现的时候,绝不使用Javascript来实现,因此记录一些有意思的CSS效果,一来是方便自己学习,另一来是方便以后在需要使用到的时候能快速找到并使用上~

耐心看完,你也许有所收获~

二、实现效果

大致效果如下,文章结尾有代码,想要的自取,如果想要看demo的可以看这个地址:gitee项目demo地址icon-default.png?t=N7T8https://gitee.com/yin_zhuqun/css-demo

《CSS3》田字网格背景(外实线内虚线)的实现_第1张图片

三、CSS要点

这个效果其实没有什么复杂的CSS写法,核心的要点就是对 background属性 的利用;MDN关于background属性的说明icon-default.png?t=N7T8https://developer.mozilla.org/zh-CN/docs/Web/CSS/background

思路大致有两点:

  1. 实线和虚线分开根据不同的尺寸画格子,然后利用background-repeat的铺满效果将整个页面平铺完整;
  2. 实线就是单独的线,虚线的实现则利用transparent这个透明属性进行隔断;

别的好像也没什么特别的点了,剩下的无非就是根据实际场景凑样式换颜色了;

四、实现代码



    
        
        
        CSS网格线,田字格
        
    
    
        
田字网格线(外实内虚)

你可能感兴趣的:(有趣的CSS系列,css3,前端,css,网格线,田字格)