In HTML, you can add borders or dotted borders to most tags. So this time we will add dotted border effect styles to several different tags. We can flexibly grasp and apply the concept of dotted borders based on the following cases.
htmlCommon tags
div标签 span ul li table tr td
Instances using CSSAttributesWords
border width height
Key introduction to CSS for dotted lines
border is the border Properties, 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 dashed line to red.
Example description
We set the same width, same height, and border effect for the above labels.
Complete HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html边框虚线演示</title>
<style>
.bor{border:1px dashed #F00;width:300px;height:60px;margin-top:10px}
span{display:block}/*css注释说明：让span形成块*/
</style>
</head>
<body>
<div class="bor">div盒子</div>
<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.
# I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
Steps to implement the effect of creating dynamic switches with Css3
How to implement the dotted line style of CSS
Steps to optimize HTML5 forms with CSS3
The above is the detailed content of Implementation steps of html border dotted line. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
