美文网首页
css写实线和虚线

css写实线和虚线

作者: 前端小飞象 | 来源:发表于2021-06-15 11:58 被阅读0次

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-leftborder-topborder-bottom
横线

相关文章

  • css写实线和虚线

    html css 效果: 横线只需要修改 为 或

  • svg实现简单的loading

    html css //设置实线和虚线的宽度stroke-dasharray: 50 30;//引用dash动画,动...

  • AndroidUi(1)-直线

    android中画线比较简单,常用的有实线和虚线 一.实线 二.虚线 Note:stroke的android:wi...

  • UML 类图实践

    0 简介 0.1 记忆技巧 实线-继承 虚线-实现 实线-关联 虚线-依赖 空心菱形-聚合 实心菱形-组合 时序图...

  • CSS基础样式

    border solid 实线dotted 点状虚线dashed 虚线double 双线 水平垂直方向布局 设置水...

  • UML类图与类的关系详解

    虚线箭头指向依赖; 实线箭头指向关联; 虚线三角指向接口; 实线三角指向父类; 空心菱形能分离而独立存在,是聚合;...

  • UML类图详解(转载)

    虚线箭头指向依赖; 实线箭头指向关联; 虚线三角指向接口; 实线三角指向父类; 空心菱形能分离而独立存在,是聚合;...

  • 空空2(第二篇)

    (作者告示:本文分割线有虚线和实线两种。 1.实线仅仅是为了读者方便区分时间线;2.虚线则是选择性阅读的划分,如果...

  • UML类图与类的关系详解

    转载文章 虚线箭头指向依赖; 实线箭头指向关联; 虚线三角指向接口; 实线三角指向父类; 空心菱形能分离而独立存在...

  • iOS 画线-圆

    画实线、虚线圆 .h .m 用法 效果图

网友评论

      本文标题:css写实线和虚线

      本文链接:https://www.haomeiwen.com/subject/netxjltx.html