Common examples of CSS dashed instances tutorial

The div css Dash Tutorial includes tutorials that explain the various styles of div dashed cases that often appear in the CSS tutorial.

This section introduces common CSS dashed lines and div tutorials. CSS dashed underline, list dotted line all done.

1, CSS Border dashed

This is where the dashed border of the border property is border control. The following settings for CSS Heights (CSS height) and css widths (CSS width) are 350 pixels for easy viewing to demonstrate other meanings.
One or four edges are dashed borders
border:1px dashed #000; Black dashed border
Instance:
CSS code:. divcss5{border:1px dashed #000; height:50px;width:350px}
HTML code: <div class= "DIVCSS5" > My four-sided black dashed border </div>
This sets the border abbreviation to define the black dashed border of the DIVCSS5 selector with a four-sided border of 1px.

Two, the left is a dashed line:
CSS code:. divcss5-1{border-left:1px dashed #000; height:50px;width:350px}
HTML code: <div class= "divcss5-1" > My left is a black dashed border </div>
This sets the left side as a dashed black border

Three, the right is dashed:
CSS code:. divcss5-2{border-right:1px dashed #000; height:50px;width:350px}
HTML code: <div class= "divcss5-2" > My right is a black dashed border </div>
This sets the black dashed border to the right side

Four, the top edge (top) is a dashed line:
CSS code:. divcss5-3{border-top:1px dashed #000; height:50px;width:350px}
HTML code: <div class= "divcss5-3" > My top is a black dashed border </div>
This sets the top edge (upper edge) side as a black dashed border

Five, bottom edge (bottom) is dashed:
CSS code:. divcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}
HTML code: <div class= "divcss5-4" > My bottom is a black dashed border </div>
This sets the bottom (bottom edge) side as a dashed black border

Six, any side is not a dashed line, the other three-sided dashed situation
Joins the right border without a dashed line and no edges, and the other three sides are dashed black borders
CSS code:. divcss5-5{border:1px dashed #000; border-right:0; height:50px;width:350px}
HTML code: <div class= "divcss5-5" > My right border has no edges and the other three sides are black dashed border instances </div>
This is done by first setting the object to a black 1px dashed border, followed by setting the edge to 0, which is equivalent to setting the border dashed property of 3 sides, but note the border property setting before and after the order.

The complete DIV+CSS code for the above example is as follows:

<! DOCTYPE html>
2. Dashed underline of hyperlinks

We often set the text content to be linked or underlined with a dotted line, or the mouse moved to a linked text appears dashed underline, this how to achieve it, here is about CSS hyperlinks to the dashed underline.

One, with linked text with dashed underline
This is also the CSS style that controls the hyperlink a object through the CSS border border property.

Demo CSS Code:
a{border-bottom:1px dashed #111;} /* Here set the dotted underline below the text with the link */
a:hover{border:0;} /* This setting does not show a dashed line when the mouse is linked text */

Full div CSS Code:

<! DOCTYPE html>
Description: Text-decoration:none; This is to remove the CSS underline (the hyperlink default comes with the underline attribute)