Home >Web Front-end >CSS Tutorial >How to make CSS dotted line style and examples of application of dotted line style
How to make CSS dotted line style and examples of application of dotted line style
- yuliaOriginal
- 2018-09-18 14:41:386459browse
In page layout, in order to present a certain effect, it is often necessary to use CSS dotted line style, but many novices are still unfamiliar with CSS dotted line style. This article will tell you about it, How to use the CSSborder attribute to create a dotted line style, as well as some application examples of CSS dotted line style. For example: the use of CSS dotted border, the use of CSS dotted lower border, the use of a dotted line, etc. Friends in need can refer to it.
1. How to make CSS dotted lines
The border-style attribute can set the style of the four borders of an element. Its common attribute values are as follows:
dotted: dotted, rendered as a solid line in most browsers
dashed: dotted line, rendered as a solid line in most browsers
solid: define solid line
none: no border
double: double line
The implementation of CSS dotted line style is to use the attribute values dashed, dotted.
The border-style attribute can be set to one value, two values, three values, or four values. Their meanings are as follows:
1. border-style: dotted solid double dashed
means The upper border is dotted, the right border is solid line, the lower border is double line, and the left border is dotted line
2. border-style: dotted solid double
means that the upper border is dotted, and the right and left borders are Solid line, the lower border is a double line
3. border-style:dotted solid
means that the upper and lower borders are dotted, and the right and left borders are solid lines
4. border-style:dotted
means that all four borders are dotted.
How to write borders: border:border-width, border-style,border-color. Therefore, a black dotted line with a width of 1px can be written as border: 1px dashed #000;
2. Application examples of CSS dotted line
1. CSS dotted line Border
<style type="text/css">
div{border: 1px dashed #000;}
</style>
<body>
<div>生活不止眼前的苟且，还有诗和远方的田野</div>
</body>Rendering:
2. li list dotted line division, that is, CSS dotted line lower border
There are also many pages that use css li tags for layout. Dotted lines are used under each line of li to separate the content, and border-bottom is used to achieve this.
<style type="text/css">
li{border-bottom: 1px dashed #000;}
</style>
<body>
<ul>
<li>have a nice day </li>
<li>have a nice day </li>
<li>have a nice day </li>
<li>have a nice day </li>
<li>have a nice day </li>
<li>have a nice day </li>
<li>have a nice day </li>
</ul>
</body>Rendering:
3. CSS a horizontal dotted line , use the hr tag, and then add styles to the hr tag, border : 1px dotted #FF0000
<hr style="border: 1px dotted #FF0000;">
Rendering:
4, hyperlink dotted underline , use border-bottom: 1px dashed #FF0000, emphasizes the content in the a tag.
<style type="text/css">
a{text-decoration: none;border-bottom: 1px dashed #FF0000;}
</style>
<body>
<div>欢迎大家来<a href="#">PHP中文网</a>学习知识</div>
</body>Rendering:
The above introduces the production method of CSS dotted line style, as well as the application examples of dotted line style in page layout. Friends, you can Give it a try and try out different effects. I hope this article can help you who love to learn!
The above is the detailed content of How to make CSS dotted line style and examples of application of dotted line style. For more information, please follow other related articles on the PHP Chinese website!