如何用css控制border 的长度?

勇敢的少年
  • 856

想要实现以下的效果:
图片描述

回复
阅读 22.3k
3 个回答
✓ 已被采纳

这个很多方法实现,不是用的border。推荐伪元素:after

你把这个小横线不要当成border,而是把它当成一个背景色充满的很小的div块,这样你可以随意改变这个div的大小 形状 长短,比较方便

给个思路,在外元素里嵌套一个专门做border的内元素

<style>
  .box{
    width:100px;
    height:100px;
    background-color:#ccc
  }
  .box-border{
    position:relative;
    left:25px;
    width:50px;
    height:100px;
    border-bottom:1px solid #000;
  }
</style>

<div class="box">
  <div class="box-border">
  </div>
</div>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏