CSS dotted line implementation methods and a variety of application examples
May 04, 2021 CSS
Table of contents
1. css dotted line implementation method
3. How to use CSS to achieve the dotted underline effect of the link
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
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.
border
the dashed line. T
he following configurations have a CSS height (CSS height) and a CSS width (CSS width) of 350 pixels.
border:1px dashed #000;
Black dotted border
Instance:
hackhome
picker with a 1px four-side border
The left side is configured with a black dotted border
The right side is configured with a black dotted border
The top edge (top line) side is configured here with a black dotted border
5, the bottom edge (bottom) is a dotted line:
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
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
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
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
border-style:dotted solid;
The top and bottom borders are dot-shaped
The right and left boxes are solid lines
border-style:dotted;
All 4 borders are dot-shaped
How to use CSS to achieve the dotted underline effect of the link
a {
color:#3399FF;
Font-weight: normal; / * font effect is normal to change to bold bold * /
Text-Decoration: none; / * Underline Effect: No Underline * /
}
a:hover {
color:#4499EE;
Text-Decoration: none; / * Underline Effect: No Underline * /
Border-bottom: 1px # 0099cc dotted / * plus a frame border with the lower side is dashed * /
}
A {} control connection effect A: hover {} Controls the effect of the mouse moved.
Css split line dotted code application instance
<hr align=left width=490 color=#990099 SIZE=3 noShade>
<HR align=center width=1 color=red size=100>
<hr size=1 style="color: blue;border-style:dotted;width:490">
Two-wire:
<hr size=1 style="COLOR:#ff9999;border-style:double;width:490">
