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

效果图

1. 亮色模式效果

在这里插入图片描述

2. 暗色模式效果

在这里插入图片描述

设计思路

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

注意事项

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

Sass代码

// 顶部分割线  
.mini-heriz&::afterposition: absoluteright: 0top: 0content: ''width: 100%height: 1pxtransform: scaleY(.25)background: grey// 顶部缩进分割线  
.mini-heriz-inset&::after@extend .mini-herizwidth: 90%left: 5%// 底部分割线  
.mini-heriz-bottom&::beforeposition: absoluteright: 0bottom: 0content: ''width: 100%height: 1pxtransform: scaleY(.25)background: grey// 底部缩进分割线  
.mini-heriz-bottom-inset&::before@extend .mini-heriz-bottomwidth: 90%left: 5%

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/754333.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2、RabbitMQ_安装

RabbitMQ安装文档 RabbitMQ官网下载地址:https://www.rabbitmq.com/download.html 1.安装依赖 在线安装依赖环境: yum install build-essential openssl openssl-devel unixODBC unixODBC-devel make gcc gcc-c kernel-devel m4 ncurses-devel tk tc x…

2025张宇考研数学基础36讲,视频百度网盘+PDF

一、张宇老师全年高数体系(听课用书指南) 25张宇全程: docs.qq.com/doc/DTmtOa0Fzc0V3WElI 复制粘贴在浏览器上打开,就可以看到2025张宇的全部的啦! 一般来说我们把考研数学划分为3-4个阶段,分别是基础阶…

CSS详细教程

文章目录 前言一、CSS应用方式1.在标签上2.在head标签的style上3.写在文件中 二、选择器1.ID选择器2.类选择器3.标签选择器4.属性选择器5.后代选择器6.样式覆盖 三、CSS样式1.高度和宽度2.块级标签和行内标签转换3.字体颜色/大小/粗细/样式/对齐/边框4.浮动5.背景色6.内边距7.边…

IDEA上的Scala环境搭建

Scala环境搭建 一、搭建Scala开发环境 安装Scala编译器 安装scala-2.12.10.msi 检查scala安装情况 在dos窗口输入scala,检查是否能够进入编译器。进行简单的scala命令计算 在IDEA中进行scala编码 File - Settings - Plugins - MarketPlace中搜索scala插件 安…

总结mac下解决matplotlib中文显示问题的几种方法

一、前言: 使⽤matplotlib画图时,由于matplotlib默认没有中⽂,显⽰中文时会出现空⽩⼩⽅块。 二、方法: 2.1 matplotlib中使用SimHei字体 1)进入终端后查看matplotlib的字体路径: $ python >>&g…

Mac玩《幻兽帕鲁》为什么打不开D3DMetal?d3d错误怎么办 d3dxl error

我之前发了一篇讲Mac电脑玩Steam热门新游《幻兽帕鲁》的文章(没看过的点这里),后来也看到很多朋友去尝试了,遇到了一些问题,无法进入《幻兽帕鲁》游戏,或者是玩的时候卡顿以及出现黑屏,通过我的…

jQuery+CSS3自动轮播焦点图特效源码

jQueryCSS3自动轮播焦点图特效源码,源码由HTMLCSSJS组成,双击html文件可以本地运行效果,也可以上传到服务器里面 下载地址 jQueryCSS3自动轮播焦点图特效源码

mac os 配置两个github账号

1. 清空git全局配置的username和email git config --global --unset user.name git config --global --unset user.emailgit config --list 可以查看是否清空了 2. 定义两个标识符,这两个标识符以后会被用来代替“github.com”来使用。 假设两个账号的邮箱地址分别是a@gmai…

计算机视觉之三维重建(1)---摄像机几何

文章目录 一、针孔模型和透镜1.1 针孔摄像机1.2 近轴折射模型1.3 透镜问题 二、摄像机几何2.1 像平面和像素平面2.2 齐次坐标下的投影变换2.3 摄像机倾斜2.4 规范化摄像机2.5 世界坐标系2.6 Faugeras定理2.7 投影变换性质: 三、其他投影摄像机模型3.1 弱透视投影摄像…

深入解析:在 Node.js 中删除文件的正确姿势

引言 在 Node.js 中处理文件尤其是移除文件,对于维护高效应用程序至关重要。储存和秩序当道的今天,删除不必要或冗余的文件能力显得尤为关键。本文深入探讨你会想要使用这个强大功能的时刻和原因,并通过各种案例展示了这个概念,同…

明远创意生活引领经典家纺品牌“大朴”走向新生

十二年前,有一个初创的国产家纺品牌,大胆地向消费者喊出领先于行业的标准——“无甲醛、无荧光增白剂、无致癌物”。凭借这样极致的健康承诺,“大朴”国内销售规模迅速超过一亿人民币,成功引领行业风气,收获了众多忠实粉丝。 2023年,因资金链断裂,“大朴”原公司破产清算,这个…

滴答拍摄影项目|基于Spring Boot框架+ Mysql+Java+ Tomcat的滴答拍摄影项目设计与实现(可运行源码+数据库+设计文档)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含java,ssm,springboot的平台设计与实现项目系统开发资源(可…

使用 stable-diffusion 入门级教程【Mac】

最近一直在短视频平台刷到AI生成的图片,质量也非常不错。术哥也跟我讲解了下如何安装使用。于是周末试了试。 也差点变成从入门到放弃了,所以也把过程中遇到的问题记录一下。 目前基本上运行正常,只是内存稍微小了点,把质量调低即…

创建一个electron-vite项目

前置条件:非常重要!!! npm: npm create quick-start/electronlatest yarn: yarn create quick-start/electron 然后进入目录,下载包文件,运行项目 到以上步骤,你已经成功运行起来一个 electr…

爬虫技术实战案例解析

目录 前言 案例背景 案例实现 案例总结 结语 前言 作者简介: 懒大王敲代码,计算机专业应届生 今天给大家聊聊爬虫技术实战案例解析,希望大家能觉得实用! 欢迎大家点赞 👍 收藏 ⭐ 加关注哦!&#x1…

Flutter-底部弹出框(Widget层级)

需求 支持底部弹出对话框。支持手势滑动关闭。支持在widget中嵌入引用。支持底部弹出框弹出后不影响其他操作。支持弹出框中内容固定头部和下面列表时,支持触摸头部并在列表不在头部的时候支持滑动关闭 简述 通过上面的需求可知,就是在界面中可以支持…

机器学习-04-分类算法-04-支持向量机SVM

总结 本系列是机器学习课程的系列课程,主要介绍机器学习中分类算法,本篇为分类算法与SVM算法部分。 本门课程的目标 完成一个特定行业的算法应用全过程: 懂业务会选择合适的算法数据处理算法训练算法调优算法融合 算法评估持续调优工程化…

HTML5球体下落粒子爆炸特效

HTML5球体下落粒子爆炸特效,源码由HTMLCSSJS组成,双击html文件可以本地运行效果,也可以上传到服务器里面 下载地址 HTML5球体下落粒子爆炸特效

阿里云2核4G4M轻量应用服务器价格165元一年

阿里云优惠活动,2核4G4M轻量应用服务器价格165元一年,4Mbps带宽下载速度峰值可达512KB/秒,系统盘是60GB高效云盘,不限制月流量,2核2G3M带宽轻量服务器一年87元12个月,在阿里云CLUB中心查看 aliyun.club 当前…

数据结构—稀疏多项式相加

利用链表实现两个稀疏多项式相加。 代码 #include <iostream> using namespace std;// 定义多项式项结构体 typedef struct {int x; // 系数int y; // 指数 } Elemtype;// 定义链表节点结构体 typedef struct Node {Elemtype data;struct Node* next; } *LinkList, N…