css虚线样式dotted和dashed
讲到css虚线样式，应该会想到border的solid，网页布局中solid用的概率最高了，要有css虚线的效果还可以用图片做背景，但是不推荐，尽量使用css虚线样式做这个虚线的效果，那么css虚线样式就是border中的dotted和dashed，这两种都是css虚线，但是他们是有区别的。
1.dotted虚线
<!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 class="box">大家好，我是dotted虚线！</div>
</body>
</html>效果如下：
2.dashed虚线
<!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 class="box">大家好，我是dashed虚线！</div>
</body>
</html>效果如下：
除注明外的文章,均为来源:老汤博客,转载请保留本文地址！
原文地址： https://tangjiusheng.com/divcss/115.html
原文地址： https://tangjiusheng.com/divcss/115.html
- 关注下 头条号后，请私信将免费分享给你一份web前端资料！
- 立即关注
大家都在看
- 美化css滚动条样式，就这么简单
- 在css中如何插入图片(详解img与background插入图片的差异)
- css图片自适应大小，css如何让图片布满
- reset.css模板，可参考下
- css图片不存在显示error（常用的两种解决方法）
- css圣杯布局详解(什么叫圣杯布局)
- css鼠标经过样式会动(两种方法实现鼠标经过样式改变)
- css隐藏滚动条可以滚动怎么实现？
- css3和css的区别是什么，css3的基本概念
- 常见css布局水平居中的6种方法
赣公网安备36072102000190