Css dashed border, with dashed line, long dash border and space between each segment

Lionsure 2020-04-15 Original by the website

It is indispensable to use border in the UI design process of the web page, so that the overall page looks better. Borders are usually divided into two types, one is a solid border and the other is a virtual border. The solid border is used more, but with dashed lines or dashed border embellishment, the web page will be more beautiful, so both types of borders should be used.

You set the border for border property in Css, usually need to set three values, namely: width, line style and color. Setting the line as a solid or dashed line mainly sets the line style. It mainly has two values, namely: solid and dashed, the former indicates a solid line and the latter indicates a dashed line.

 

I. Css dashed line

html code:

<ul class="uldashed">
              <li>Css dashed line</li>
              <li>Css dashed border</li>
       </ul>

Css style:

.uldashed{border:1px solid #c7255d; width:300px; height:60px;margin:0;padding:0; line-height:26px;}
        .uldashed li{border-bottom:1px dashed #c7255d;list-style:none;}

Effect picture:

  • Css dashed line
  • Css dashed border

 

The above Css style is to set a dashed line for each line of ul, and the combination of virtual and real is much better than the solid line alone. In practical applications, the dashed line of the last line should be hidden, so that it is more beautiful, as long as you set a Css style and set border-bottom to none.

 

II. Css dashed border

html code:

<ul class="uldashedborder">
              <li>Css dashed border</li>
              <li>Border dashed line css</li>
       </ul>

Css style:

.uldashedborder{border:1px dashed #c7255d; width:300px; height:60px;margin:0;padding:0; line-height:26px; padding-bottom:23px;}
        .uldashedborder li{border-bottom:1px solid #c7255d;list-style:none;}

Effect picture:

  • Css dashed border
  • Border dashed line css

The above Css style is to set the border as a dashed line and the bottom of the line as a solid line, which is exactly the opposite of the above example, and the effect is not as good as it. In general, dashed lines are often used inside solid borders.

 

III. Css long dash border

html code:

<div class="longDashedBorder"><span class="text">Css long dash border</span></div>

Css style:

.longDashedBorder{position:relative; margin:68px 0 0 130px; height:44px;width:86px; display:inline-block; border:dashed 1px #f20afb; transform:scale(4); overflow:hidden;}
       .text{position:relative; margin:-54px 0 0 -106px; float:left; height:150px;width:300px; line-height:22px; display:inline-block; transform:scale(0.28);}

Effect picture:

Css long dash border

The above long dashed border is implemented with the Css magnification property scale, so that the dashed line will increase lenght but not widen; if only the X axis direction is increased, you can use scalex; if only the Y axis direction is increased, you can use scaley. Using scale, in addition to enlarging the border, also enlarge other elements, you need to adjust them back, which is more troublesome.

 

IV. Dashed css space

html code:

<div class="dashedSpace"></div>
       <div class="dashedSpace linear"></div>

Css style:

.dashedSpace {
              width:350px;
              height:1px;
              margin-top:10px;
              background-image:linear-gradient(to right, #f20afb 0%, #f20afb 50%, transparent 50%);
              background-size:28px 1px;
              background-repeat:repeat-x;
       }

.linear {
              background-image: linear-gradient(to right, #ccc 0%, #f20afb 50%, transparent 50%);
              background-size:40px 1px;
       }

Effect picture:

Dashed css space

The dashed line of the dashed style cannot adjust the spacing, only the gradient generating function linear-gradient() can be used, "to right" means gradient from left to right, "#ccc 0% means" starting point color and color percentage, "#f20afb 50%" means ending point color and color percentage, "Transparent 50%" means transparency.