How to realize dotted Line in CSS
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.
