Detailed introduction to the method of setting dotted border in html-HTML Tutorial-php.cn

Detailed introduction to the method of setting dotted border in html

高洛峰

Release： 2017-03-03 16:34:56

Original

6391 people have browsed it

Use CSS styles and HTML tag elements In order to add dotted borders to different HTML tags, we select several common tags to align and set the dotted border effect.

1. Commonly used tags in html p tag span ulli table tr td

2. The example uses CSS attribute words border width height

3. Key introduction to CSS for realizing dotted lines border is the border attribute. If you want to implement

use CSS styles and HTML tag elements

In order to add dotted borders to different html tags, we select several common tags to align and set the dotted border effect.

1. Common html tags

p tag

span

ul li

table tr td

2. The example uses CSS attribute words

border

width

height

3 , Key points of CSS for realizing dotted lines

border is the border attribute. If you want to achieve the object border effect, you need to set the border width, border color, and border style (solid or dotted line)

border:1px dashed #F00 This is to set the border style width to 1px, dotted line, and the dotted line is red.

4. Example description

We set the same width, same height, and border effect for the above labels.

5. Complete HTML code:

<!DOCTYPE html> <html> 
<head> <meta charset="utf-8" /> 
<title>html边框虚线演示 www.pcss5.com</title> <style> 
.bor{border:1px dashed #F00;width:300px;height:60px;margin-top:10px} span{display:block}/*css注释说明：让span形成块*/ 
</style> </head> 
<body> <p class="bor">p盒子</p> 
<span class="bor">span盒子</span> <ul class="bor"> 
<li>ul li列表</li> <li>ul li列表</li> 
</ul> <table class="bor"> 
<tr> <td>表格</td> 
<td>表格2</td> </tr> 
<tr> <td>数据</td> 
<td>数据2</td> </tr> 
</table> </body> 
</html>

Copy after login

The above example sets the same style for different tags in html, including the same border dotted line.

6. Screenshot of browser effect

Detailed introduction to the method of setting dotted border in html