CSS Dash Style implementation method One: dotted dashed line
<! Doctype html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text / html; charset = gbk2312" />
<title> dotted dotted line </ 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 class = "box"> Hello everyone, I ’m dotted! </ div>
</ body>
</ html>
dotted dotted display effect:
CSS dotted line style 2: dashed dotted line
<! Doctype html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text / html; charset = gbk2312" />
<title> dashed dotted line </ 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 class = "box"> Hello everyone, I ’m a dashed dotted line! </ div>
</ body>
</ html>
The dashed dotted line shows the effect:
The difference between dotted and dashed in css dotted style border
dashed: from dash (dash), a dashed line composed of dash
dotted: dotted line from dot (dot), also called dotted line
The above demo can also intuitively see their difference
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
