current position:Home>The implementation of the dotted line of the HTML+CSS common skills that the front end must know

The implementation of the dotted line of the HTML+CSS common skills that the front end must know

2022-08-06 16:05:37zhuangwei_8256

前端必会的 HTML+CSS 常用技巧 之 A special implementation of the dashed line

利用边框 border 属性

  • This property is relatively simple
<div class="dashed">利用边框 border dashed Properties implement dashed lines</div>
<div class="dotted">利用边框 border dotted Properties implement dashed lines</div>
div {
    
    width: 500px;
    padding: 10px;
}
.dashed {
    
    border-bottom: 1px dashed #000;
}
.dotted {
    
    border-bottom: 1px dotted #000;
}
  • Take a look at the effect of these two dotted lines:
    在这里插入图片描述

但是有时候,This is not the effect we want,This dotted line “虚”is too inconspicuous.


利用background 的 linear-gradient 属性

  • 效果:
    在这里插入图片描述

  • 实现代码:

<div class="top">利用background 的 linear-gradient 属性实现 上 虚线</div>
div {
    
    width: 500px;
    padding: 10px;
}
.top {
    
    background: linear-gradient(
        to left,
        transparent 0%,
        transparent 50%,
        red 50%,
        red 100%
    );
    background-size: 10px 1px; /* The first parameter controls the gap of the dotted line(The same effect is used to enlarge the picture),The second parameter controls the thickness of the dashed line */
    background-repeat: repeat-x;
    background-position: top; /* 控制方向:top、bottom */
}

  • 效果:
    在这里插入图片描述

  • 实现代码:

<div class="bottom">利用background 的 linear-gradient 属性实现 下 虚线</div>
div {
    
    width: 500px;
    padding: 10px;
}
.bottom {
    
   background: linear-gradient(
        to left,
        transparent 0%,
        transparent 50%,
        blue 50%,
        blue 100%
    );
    background-size: 10px 1px; /* The first parameter controls the gap of the dotted line(The same effect is used to enlarge the picture),The second parameter controls the thickness of the dashed line */
    background-repeat: repeat-x;
    background-position: bottom; /* 控制方向:top、bottom */
}

  • 效果:
    在这里插入图片描述

  • 实现代码:

<div class="left">利用background 的 linear-gradient 属性实现 左 虚线</div>
div {
    
    width: 500px;
    padding: 10px;
}
.left {
    
    background: linear-gradient(
        transparent 0%,
        transparent 50%,
        #000 50%,
        #000 100%
    );
    background-size: 1px 10px; /* The vertical dashed line is the opposite of the horizontal dashed line,The first parameter controls the thickness of the dashed line,The second parameter controls the gap of the dotted lines */
    background-repeat: repeat-y;
    background-position: left; /* 控制方向:right、left */
}

  • 效果:
    在这里插入图片描述

  • 实现代码:

<div class="right">利用background 的 linear-gradient 属性实现 右 虚线</div>
div {
    
    width: 500px;
    padding: 10px;
}
.right {
    
    background: linear-gradient(
        transparent 0%,
        transparent 50%,
        orange 50%,
        orange 100%
    );
    background-size: 1px 10px; /* The vertical dashed line is the opposite of the horizontal dashed line,The first parameter controls the thickness of the dashed line,The second parameter controls the gap of the dotted lines */
    background-repeat: repeat-y;
    background-position: right; /* 控制方向:left、right */
}

矩形

  • 效果:
    在这里插入图片描述

  • 实现代码:

<div class="rectangle">利用background 的 linear-gradient 属性实现 矩形 虚线</div>
div {
    
    width: 500px;
    padding: 10px;
}
.rectangle {
    
   border: 1px dashed transparent;
    background: linear-gradient(#fff, #fff) padding-box, repeating-linear-gradient(-45deg, #000 0, #000 .3em, #fff 0, #fff .6em);
    /* .3em Controls the width or length of the dashed line,.6em Controls the gap between the dotted lines */
}


如有不足,望大家多多指点! 谢谢!

copyright notice
author[zhuangwei_8256],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/218/202208061554422003.html

Random recommended