【Sass】1px分割线 + 缩进分割线

效果图

1. 亮色模式效果

2. 暗色模式效果

设计思路

  1. 配色使用grey
    • 优点:无论在暗色模式还是亮色模式都可以看清楚分割线
  2. 使用after,before 伪元素绘制线条,并压缩线条transform: scaleY(.25)

注意事项

  1. 必须确保父级有宽高
  2. 父级定位必须为position: relative

Sass代码

css 复制代码
// 顶部分割线  
.mini-heriz
    &::after
        position: absolute
        right: 0
        top: 0
        content: ''
        width: 100%
        height: 1px
        transform: scaleY(.25)
        background: grey

// 顶部缩进分割线  
.mini-heriz-inset
    &::after
        @extend .mini-heriz
        width: 90%
        left: 5%

// 底部分割线  
.mini-heriz-bottom
    &::before
        position: absolute
        right: 0
        bottom: 0
        content: ''
        width: 100%
        height: 1px
        transform: scaleY(.25)
        background: grey


// 底部缩进分割线  
.mini-heriz-bottom-inset
    &::before
        @extend .mini-heriz-bottom
        width: 90%
        left: 5%
相关推荐
LuHang几秒前
WebSocket服务封装实践:从连接管理到业务功能集成
前端·websocket
九十一1 分钟前
vue2中$set的原理
前端
闲不住的李先森8 分钟前
深入解析 Cursor 规则:为团队打造统一的 AI 编程规范
前端·ai编程·cursor
FlowGram22 分钟前
FlowGram 官网建设
前端
~无忧花开~28 分钟前
JavaScript学习笔记(二十八):JavaScript性能优化全攻略
开发语言·前端·javascript·笔记·学习·性能优化·js
BumBle29 分钟前
基于UniApp实现DeepSeek AI对话:流式数据传输与实时交互技术解析
前端·uni-app
九十一31 分钟前
vue3事件总线与emit
前端·vue.js
岁月向前1 小时前
不同的协议和场景防丢包方案
前端
琢磨先生TT1 小时前
一个前端工程师的年度作品:从零开发媲美商业级应用的后台管理系统!
前端·前端框架
云枫晖1 小时前
JS核心知识-Ajax
前端·javascript