How to implement CSS dotted line style-CSS Tutorial-php.cn

How to implement CSS dotted line style

php中世界最好的语言

Release： 2017-12-01 11:43:12

Original

3066 people have browsed it

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>

Copy after login

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>

Copy after login

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 !