Posts in current category

CSS dotted line implementation methods and a variety of application examples


May 04, 2021 01:00 CSS


Table of contents


Many CSS beginners often use CSS dashed styles during front-end development, but don't know how CSS dash styles can be implemented, such as a CSS that says: border-style:dotted solid double dashed; The box that comes out is: the top border is dotted, the right border is solid, the bottom border is double, the left border is dashed, if a CSS writes like this: border-bottom:1px dashed #000000; T he box that comes out is a black underscore with a width of 1 pixel. CSS on the "line" type is really quite a lot, in which nods are more concerned about the "dotted line implementation method."


css dotted line implementation method

Definitions and usages:
The border-style property is used to style all borders of an element, or to style borders individually for each edge. B orders can only appear if none is not none.

Here the dotted border border of the border border the dashed line. T he following configurations have a CSS height (CSS height) and a CSS width (CSS width) of 350 pixels.

1, four sides for the dotted border
border:1px dashed #000; Black dotted border

Instance:


.hackhome{border:1px dashed #000; height:50px;width:350px}


Try it out . . .
The border abbreviation is configured here to explain the black dotted border of the hackhome picker with a 1px four-side border

2, the left side is a dotted line:

.hackhome-1{border-left:1px dashed #000; height:50px;width:350px}


Try it out . . .
The left side is configured with a black dotted border

3, the right side is a dotted line:

.hackhome-1{border-right:1px dashed #000; height:50px;width:350px}


Try it out . . .
The right side is configured with a black dotted border

4, the top edge (top) is a dotted line:

.hackhome-1{border-top:1px dashed #000; height:50px;width:350px}


Try it out . . .
The top edge (top line) side is configured here with a black dotted border

5, the bottom edge (bottom) is a dotted line:

.hackhome-1{border-bottom:1px dashed #000; height:50px;width:350px}


Try it out . . .
The bottom edge (bottom edge) is configured here with a black dotted border on the side

6, casual side is not a dashed line, the other three sides are a dotted line situation
The participating right border is not a dashed border with no edges, and the other three sides are black dashed borders
.hackhome{ border:1px dashed #000;border-right:0; height:50px;width:350px; }

Try it out . . .
The object is configured here with a black 1px dashed border on all four sides, followed by a sideline 0 configuration, which is equivalent to configuring a 3-side border dashed property, but here you pay attention to the order before and after the border property configuration

Common css dashed style

Example 1
border-style:dotted solid double dashed;
The top border is dot-shaped
The right box is solid
The bottom border is a double line
The left box is a dashed line

Example 2
border-style:dotted solid double;
The top border is dot-shaped
The right and left boxes are solid lines
The bottom border is a double line

Example 3
border-style:dotted solid;
The top and bottom borders are dot-shaped
The right and left boxes are solid lines

Example 4
border-style:dotted;
All 4 borders are dot-shaped

How to use CSS to achieve the dotted underline effect of the link

Modify your style sheet and look for the next paragraph (usually at the beginning)

a {

color:#3399FF;

font-weight:Normal; /*字体效果 普通 可以改成bold粗体*/

text-decoration:none; /*下划线效果:无下划线*/

}

a:hover {

color:#4499EE;

text-decoration:none; /*下划线效果:无下划线*/

border-bottom: 1px #0099CC dotted /*加一个只有下边的框 边框为虚线*/

}

a{}控制连接的效果 a:hover{}控制鼠标移上去的效果。


Css split line dotted code application instance

Solid lines:

<hr align=left width=490 color=#990099 SIZE=3 noShade>

CSS dotted line implementation methods and a variety of application examples
Vertical line:

<HR align=center width=1 color=red size=100>

CSS dotted line implementation methods and a variety of application examples

Dashed:

<hr size=1 style="color: blue;border-style:dotted;width:490">


CSS dotted line implementation methods and a variety of application examples

Two-wire:

<hr size=1 style="COLOR:#ff9999;border-style:double;width:490">


CSS dotted line implementation methods and a variety of application examples