随笔分类 - css
摘要:<!-- * @Author: Simoon.jia * @Date: 2024-12-13 17:38:51 * @LastEditors: Simoon.jia * @LastEditTime: 2024-12-13 19:00:34 * @Description: 描述 --> <!DOCTY
阅读全文
摘要:& 也代表父选择器的引用,可以继续使用 & 来引用父级选择器,但要确保正确地应用 :first-child 伪类。 .titleLeft { width: 70%; display: flex; align-items: center; &:first-child { margin-right: 2
阅读全文
摘要:background-image:linear-gradient(110deg, rgb(1, 228, 161) 49%, rgb(0, 0, 0) 2% 51%, rgb(226, 237, 251) 49%); linear-gradient详解: 简单实例:从头部开始的线性渐变,从红色开始,
阅读全文
摘要:注意:此处计算需要使用calc,less的减法是在编译阶段不满足此处需求 上下两张图高度为5px,位置紧贴上下边缘,中间背景图根据高度拉伸,并且增加模糊度 background: url('./images/top.png') no-repeat, /* 顶部图片 */ url('./images/
阅读全文
摘要:1.使用边框绘制三角形 通过设置一个元素的宽度和高度为0,然后设置不同边框的颜色和宽度来实现。 <div class="triangle"></div> .triangle { width: 0; height: 0; border-left: 50px solid transparent; bor
阅读全文
摘要:>input { caret-color: rgba(255, 255, 255, 0.5) !important; }
阅读全文
摘要:common.js :global { //下拉框失去焦点样式 .CM_DB-select-selection { background-color: #061437 !important; border: 1px solid #27436D !important; .CM_DB-select-se
阅读全文
摘要:gap属性可确定flex布局的间距宽度,(配合flex布局属性使用) gap: 0px 7px; display: flex; justify-content: space-around;
阅读全文
摘要:transform: translate(-50%); translate(50%) 相当于 translateX(50%),表示沿X轴方向平移元素自身宽度的50%。 绝对定位是最常见的问题是难以居中,所以可以改变元素的中心,来达到居中的效果 position: absolute; left: 50
阅读全文
摘要:1.scrollTop scrollTop 为 0 2.history.scrollRestoration 使用很简单,在页面的任意位置执行下面几行 JS 代码就可以了: if (history.scrollRestoration) { history.scrollRestoration = 'ma
阅读全文
摘要:webpack配置中需要配置改字体包类型: { test: /\.(svg|eot|ttf|woff|otf|woff2)$/, type: 'asset', parser: { dataUrlCondition: { maxSize: 4096, // <= 4kb的字体base64内联 }, }
阅读全文
摘要:object-fit是一个用于控制替换元素(如<img>或<video>)内容在其容器内布局和缩放的CSS属性。 它的作用是调整替换元素的尺寸和位置,使其适应容器,并保持其纵横比例。 然而,object-fit属性本身并不直接适用于背景图片。如果你想在背景图片上应用object-fit效果,可以使用
阅读全文