css写实线和虚线

html

<div class="solid_line"></div>
<div class="dotted-line"></div>

css

.solid_line{
     height: 80px;
     border-left: 3px solid #b2b2b2;
     border-radius: 3px;//实现线两端的圆角
}
.dotted-line{
     height: 80px;
     border-left: 4px dotted #b2b2b2;
}

效果：

竖线

横线只需要修改border-left 为border-top或border-bottom
横线

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS入门篇（上）
    脑图复习 Html和CSS的关系 学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。...
    朝南而行_阅读 12,213评论 1赞 9
  • HTML & CSS 基础
    HTML 基本结构 基本骨架 DTD 命名空间 字符集 基本骨架： 标签：根标签 标签: 内部置放对网页的设置，例...
    琳琳酱吖阅读 534评论 0赞 3
  • HTML+CSS基础课程(上)
    1、HTML介绍 1 2、Html和CSS的关系 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户...
    夏沫xx阅读 1,442评论 0赞 8
  • HTML+CSS基础(HTML篇)
    引言 在日常开发Android中，很多时候会遇到和WebView打交道，对CSS HTML JS不是很清楚的话是完...
    张文靖同学阅读 2,878评论 0赞 11
  • CSS属性
    CSS样式规则 使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解...
    wrootlflvl阅读 1,863评论 0赞 2