随笔分类 -  CSS3

摘要:在CSS中,border-radius 用于创建元素的圆角边框,但边框圆角本身是包含在元素的总宽度和高度内的,并不会额外占用外部空间或使元素尺寸变大。如果你想让圆角“向外突出”,即不占用div本身的宽度和高度,可以通过一些技巧来模拟这种效果。 一种常见的方法是使用伪元素 (::before 和 :: 阅读全文 »
posted @ 2024-05-10 10:44 龙陌 阅读(366) 评论(0) 推荐(0) 编辑
摘要:在现代前端项目中,特别是在使用webpack等构建工具时,~@ 是一种约定的写法,用于处理模块化的CSS或预处理器(如Less、Sass)文件的导入。 这里的 ~@/commonStyles/index.less 表示: ~ 符号:在一些构建系统中(尤其是webpack),此符号告诉构建工具这是一个 阅读全文 »
posted @ 2024-02-06 15:58 龙陌 阅读(306) 评论(0) 推荐(0) 编辑
摘要:margin上边距下边距覆盖 首先,我们知道水平间距不会重合覆盖 但是,两个或多个块级盒子的垂直相邻边界会重合。 边界宽度结果的如下: 如果都是正值:相邻边界宽度中最大的值。 如果有一个负值:在最大的正边界中减去绝对值最大的负边界。 如果都是负值:从零中减去绝对值最大的负边界。 但是,事有例外,下面 阅读全文 »
posted @ 2024-01-21 18:24 龙陌 阅读(14) 评论(0) 推荐(0) 编辑
摘要:text-overflow:ellipsis 设置超出省略号不管用的原因可能是哪些 text-overflow: ellipsis 设置超出文本内容显示省略号(…)可能不管用的原因有以下几点: 容器宽度没有限制: text-overflow: ellipsis 与 overflow: hidden 阅读全文 »
posted @ 2024-01-21 17:53 龙陌 阅读(1368) 评论(0) 推荐(0) 编辑
摘要:注意 当鼠标悬浮在DOM元素上时,显示的宽度和高度通常是包含padding但不包含margin的。 这是因为padding表示元素内容和边框之间的空间,而margin则表示元素边框和周围元素之间的空间。 常用的,给div设置高度,然后使用padding设置空隙。 css margin和padding 阅读全文 »
posted @ 2024-01-21 17:49 龙陌 阅读(52) 评论(0) 推荐(0) 编辑
摘要:下面是一个使用 SCSS 编写的 util,用于创建毛玻璃特效的背景图片,并确保文字不被遮挡。该 util 使用 ::before 伪元素来创建毛玻璃效果,同时在伪元素上添加文字,以确保文字显示在图片上方。 @mixin glassBackground($imageUrl, $textColor: 阅读全文 »
posted @ 2024-01-14 23:00 龙陌 阅读(46) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示