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

This article will explain in detail how to achieve dotted lines in CSS. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

1. The making method of CSS dotted line

The border-style attribute can style the four borders of an element, and its common attribute values are as follows:

Dotted: dotted, rendered as solid lines in most browsers

Dashed: dashed lines, rendered as solid lines in most browsers

Solid: defining solid Lin

None: no border

Double: two-wire

The implementation of the CSS dotted line style is the property value dashed,dotted used.

The border-style property can set one value, two values, three values, and four values, which represent the following:

1 、 border-style:dottedsoliddoubledashed

Indicates that the upper border is dotted, the right border is solid, the lower border is double, and the left border is dotted.

2 、 border-style:dottedsoliddouble

Indicates that the upper border is dotted, the right and left borders are solid, and the lower border is double

3 、 border-style:dottedsolid

Indicates that the upper and lower borders are dotted, and the right and left borders are solid lines

4 、 border-style:dotted

Indicates that all four borders are dotted.

The border is written in border:border-width,border-style,border-color. So, a black dotted line with a width of 1px can write border:1pxdashed#000 like this.

2. An example of the application of CSS dotted line

1. CSS dashed border

Div {border:1pxdashed#000;}

Life is not only the present, but also the poetry and the distant fields.

2. Li list dashed line segmentation, that is, the frame under the CSS dashed line

Page layout with cssli tags are also more, each line under the li with dotted lines to separate the content, with border-bottom to achieve.

Li {border-bottom:1pxdashed#000;}

Haveaniceday

Haveaniceday

Haveaniceday

Haveaniceday

Haveaniceday

Haveaniceday

Haveaniceday

This is the end of the article on "how to achieve dotted lines in CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.