CSS如何制作这种线条?

vayne
  • 279

clipboard.png

横着的线我可以用hr来实现,但是如何实现竖着的这个线条呢?

回复
阅读 6.2k
5 个回答
天空影
  • 1.1k
✓ 已被采纳

1、背景渐变可以制作

li{
    background:linear-gradient(to bottom,#dd2926,#a82724) no-repeat right / 1px 20px;
}
 

2、border-right也可以
3、加一个元素进去也可以 例

<li></li>
<i></i>
<li></li>

<style>
i{
    display:inline-block;
    width:1px;
    height:30px;
    background:#eee;
}
</style>
  1. 每个盒子有下和右边框
  2. media-query每行最后一个去掉右边框

这个是1px的细线边框,border-collspace : collspace.

border
或者当前标签比如li
li {

border-right: 1px solid #000;

}

看你怎么应用

table + border-collapse:collapse;

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏