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>The above example sets the same style for different tags in html, including the same border dotted line.
6. Screenshot of browser effect
htmlScreenshot of different label setting border dotted line effect
More html For a detailed introduction to the method of setting a dotted border, please pay attention to the PHP Chinese website for related articles!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
