Speaking of the dotted line style of CSS, we will think of the solid of the border. The probability of using solid in the layout of the web page should be the highest, but do you know that there are also dotted dotted lines and ashed dotted lines? Today I will introduce to you these two attributesmethods for making dotted lines.
When talking about css dotted line style, you should think of solid in border. Solid is the most likely to be used in web page layout. If you want to have the effect of css dotted line, you can also use picture as the backing, but not It is recommended to use css dotted line style to achieve this dotted line effect. Then the css dotted line style is dotted and dashed in border. Both of them are css dotted lines, but they are different.
1.dotted dotted line
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>dotted虚线</title>
<style type="text/css">
*{
margin:100px;
padding:0;
}
body{
width:1000px;
margin:0 auto;
}
.box{
width:300px;height:50px;
text-align:center;
padding-top:30px;
border:1px dotted #000;
}
</style>
</head>
<body>
<div>大家好，我是dotted虚线！</div>
</body>
</html>2.dashed dotted line
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>dashed虚线</title>
<style type="text/css">
*{
margin:100px;
padding:0;
}
body{
width:1000px;
margin:0 auto;
}
.box{
width:300px;height:50px;
text-align:center;
padding-top:30px;
border:1px dashed #000;
}
</style>
</head>
<body>
<div>大家好，我是dashed虚线！</div>
</body>
</html>I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website !
Related reading:
How to use CSS3 function rotate()
CSS3 to make circular style breadcrumbs code implementation Steps
Several ways to position in the front-end project
The above is the detailed content of How to implement CSS dotted line style. 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)
