Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about the definition of CSS dotted lines and dotted lines. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

1. CSS border dashed line

Here the dotted line is controlled through the dashed border border of the border property. The following configuration of css height (css height) and css width (css width) of 350 pixels is to facilitate the observation of hesitation to demonstrate other meanings.

The first and fourth sides are dotted borders.

Border:1px dashed # 000; black dotted border

Example:

CSS code: .CSS5 {border:1px dashed # 000; height:50px;width:350px}

Html code: my four sides are colored dotted borders

Here, the border abbreviation method is configured to define the black dotted border of the CSS5 determiner whose four sides are 1px.

Second, the dotted line on the left:

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

Html code: my left is a black dotted border

There is a black dotted border on the left side.

Third, the dotted line on the right:

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

Html code: my right side is a black dotted border

Here the right side is set as a black dotted border.

4. The top edge (above) is a dotted line:

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

Html code: my top is a black dotted border

Here the equipment is equipped with a colored dotted border on the top edge (upper boundary line).

5. The bottom edge (below) is a dotted line:

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

Html code: my bottom is a color dotted border

Here the bottom edge (bottom line) is configured with a color dashed border on one side.

Either side is not a dotted line, and the other three sides are a dotted line environment

Included in the right border is not a dashed line but no border, and the other three sides are black dotted borders

CSS Code: .CSS5-5 {border:1px dashed # 000 borderMurrightVANO; height:50px;width:350px}

Html code: my right border has no boundary and the other three sides are color dotted border examples.

Here, by setting up the equipment first, the four sides of the object are black 1px dashed borders, and then the configuration of one side is 0, which is equivalent to setting the dashed line properties of 3 sides, but pay attention to the configuration of the border properties one after another.

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

CSS dotted line CSS5 example indicates css5.com.cn

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

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

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

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

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

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

/ * css5.com.cn instance * /

Css5.com.cn css dashed line instance

I have dotted borders on all sides.

My left is a colored dotted border.

My right side is a black dotted border.

My top is a colored dotted border.

My bottom is a colored dotted border.

My right border has no boundary and the other three sides are examples of black dotted lines.

The dotted borders of various colors are demonstrated above. If you want to distinguish CSS border (CSS frame) in more detail, you can go to: / / www.css5.com.cn/css/912.shtml

2. Hyperlink dotted line underline

We often set the calligraphy mode to be linked either with a dotted line, or move the mouse to a linked pen and ink to underline a dotted line. How to accomplish this? here is a brief introduction to the dotted line underline for CSS hyperlinks.

1. Pen and ink with links are underlined with dotted lines

It is also through the CSS border border property to control the CSS style of the hyperlink an object.

Demonstrate the CSS code:

A {border-bottom:1px dashed # 111;} / * here set the dotted underline below the linked pen and ink * /

A:hover {border:0;} / * it is configured here that dotted lines do not appear when the mouse is linked to pen and ink * /

Complete DIV CSS code:

An example of CSS dashed underline CSS5

A {border-bottom:1px dashed # 111th textdecorationbank;}

A:hover {border:0;}

Welcome to css5.com.cn-CSS5 for further study CSS of CSS tutorial Network

Clarify: text-decoration:none; this is to remove the CSS underscore (the hyperlink acquiesce to the built-in underline attribute)

These are all the contents of the article "how to define CSS dotted lines and dotted lines". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.