CSS in the border property of making Web page dashed

This article mainly describes the CSS page in the production of the dashed line (the use of border property), the need for friends can refer to the following

Here the border property of the dashed border border controls the dashed line. The following configured CSS Heights (CSS height) and css widths (CSS width) are 350 pixels.

One or four edges are dashed borders

border:1px dashed #000; Black dashed border

Instance:

CSS code:

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

HTML code: My four-sided black dashed border

Here the outline of the border is configured to interpret the black dashed border of the Hackhome picker with a four-sided border of 1px

Two, the left is a dashed line:

CSS code:

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

HTML code: Black dashed border on my left

The left side is configured with a dashed black border

Three, the right is dashed:

CSS code:

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

HTML code: Black dashed border on my right

The right side is configured with a dashed black border

Four, the top edge (top) is a dashed line:

CSS code:

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

HTML code: My top is a black dashed border

Here the top edge (upper edge) is configured with a black dashed border

Five, bottom edge (bottom) is dashed:

CSS code:

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

HTML code: My bottom is a dashed black border

This is configured with a dashed black border on one side (bottom edge)

Six, the casual side is not dashed, the other three-sided dotted line condition

Participation in the right border is not dashed with no edges, and the other three sides are dashed black borders

CSS code:

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

HTML code: My right border has no edges and the other three sides are black dashed border instances

Here, the object is configured with a black 1px dashed border, followed by a configuration with a side edge of 0, which is equivalent to a border dashed property configured with 3 sides, but note that the border property is configured before and after the order

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!