写代码的时候经常会遇到,网页头部导航栏中有丨分割线
比如这样的:
有很多种实现方式
- 用背景图片
- 伪元素before,after
- 给盒子width:1px;
- 加边框
- 小图标
- 等
用标签加浮动写或用before,after写完后一直存在一像素大小不一的情况
如图
同样是一像素,后面比前面宽,放大缩小网页也随之变化
解决方法:
- 用transform:scale(0.5,1);按比例缩小。
- 或者加1像素边框
写代码的时候经常会遇到,网页头部导航栏中有丨分割线
比如这样的:
有很多种实现方式
用标签加浮动写或用before,after写完后一直存在一像素大小不一的情况
如图
同样是一像素,后面比前面宽,放大缩小网页也随之变化
解决方法: