随笔分类 -  前端 / CSS

如何在CSS中创建从左上角到右下角的渐变边框
摘要：要在CSS中创建一个从左上角到右下角的渐变边框，可以使用伪元素（如 ::before​ 或 ::after​）结合 linear-gradient​ 来实现。以下是几种常见的方法： 方法一：使用伪元素覆盖边框 这种方法通过在元素上添加一个绝对定位的伪元素，并应用线性渐变背景来模拟边框效果。 <!DO 阅读全文
posted @ 2025-04-20 13:03 污斑兔 阅读(168) 评论(0) 推荐(0)
Less vs Sass：现代CSS预处理器的技术选型指南
摘要：一、CSS预处理器概述 CSS预处理器通过扩展CSS语法为开发者提供更强大的样式编写能力，目前主流解决方案主要有： Less（Leaner Style Sheets） Sass（Syntactically Awesome Style Sheets） 两者都实现了： 变量管理 嵌套规则 混合宏（Mix 阅读全文
posted @ 2025-04-20 12:59 污斑兔 阅读(148) 评论(0) 推荐(0)
使用CSS实现问答场景下的对齐与缩进效果
摘要：在技术文档或博客中，问答形式的排版非常常见。为了让问答内容更加清晰易读，我们通常希望问题和答案能够对齐，并且在答案换行时能够自动缩进，以增强可读性。今天，我将分享一个非常实用的CSS技巧，通过padding-left​和text-indent​属性实现这种效果。 问题场景 假设我们有以下问答内容： 阅读全文
posted @ 2025-04-20 12:59 污斑兔 阅读(69) 评论(0) 推荐(0)
SCSS核心特性解析：从基础到进阶实践
摘要：一、变量系统：样式的动态管理 1.1 变量定义与使用 SCSS的变量系统为样式管理带来革命性变化，使用$​符号定义： $primary-color: #3498db; $spacing-unit: 1rem; $border-radius: 4px; .button { background: $p 阅读全文
posted @ 2025-04-20 12:59 污斑兔 阅读(47) 评论(0) 推荐(0)
深入理解BEM命名法：提升CSS代码可维护性的利器
摘要：在现代Web开发中，随着前端项目规模的不断扩大，如何编写清晰、易于维护且具有高度复用性的CSS代码成为了一个关键挑战。BEM（Block Element Modifier）命名约定作为一种有效的解决方案，被广泛应用于构建模块化和可扩展的用户界面。本文将深入探讨BEM的概念、优势及其实际应用案例。 什 阅读全文
posted @ 2025-04-20 12:58 污斑兔 阅读(99) 评论(0) 推荐(0)
使用CSS属性选择器优化类名管理
摘要：在现代Web开发中，HTML和CSS的类名管理是一个常见的挑战。随着项目规模的扩大，类名的堆叠和重复使用往往会导致CSS代码变得臃肿且难以维护。本文将介绍如何利用CSS的特殊属性选择器，以更优雅和高效的方式管理类名。 问题背景 在HTML中，我们经常使用类名来定义元素的样式。例如： \<div cl 阅读全文
posted @ 2025-04-20 12:53 污斑兔 阅读(36) 评论(0) 推荐(0)
Stencil 基础
摘要：Stencil 一个轻量化，渐进式编译器， 注意 ，不是框架。 使用 TypeScript 进行所有操作，这是一个门槛，有一定技术门槛要求。 PS：个人强烈推荐所有的前端同学都学习，或至少了解这个超集语言。 生命周期 componentWillLoad componentDidLoad compon 阅读全文
posted @ 2018-10-19 17:17 污斑兔 阅读(878) 评论(0) 推荐(0)
前端组件切换样式还原
摘要：本文使用 Vue 做例子，其他框架或原生一样原理 先看效果 这个文章的启发是来自这几天跟别人讨论跨平台解决方案时候意外发现，许多多年前端经验的跨平台开发工程师，都在考虑组件切换引起的瞬间白屏以及组件返回，原组件显示还原问题。 误导思路 厉害的前端工程师总是可以解决问题，比如上面那个问题，我们拿 A、 阅读全文
posted @ 2018-10-19 15:22 污斑兔 阅读(1153) 评论(0) 推荐(0)
汤不热分享动画
摘要：别问我为什么上汤不热（猥琐脸），友尽！ 正经事 Tumblr 分享成功会有这么个动画，觉得挺有意思，就扒出来看了看…… 第一感觉以为是 canvas 绘制的，后来发现居然是原生DOM操作，嘿嘿，我就喜欢这种！ ![原图][1] 首先自然是去找 DOM 结构，Chrome 调试出来结果如下： 就是普通 阅读全文
posted @ 2018-10-13 19:54 污斑兔 阅读(862) 评论(0) 推荐(0)
Grid布局20行代码快速生成瀑布流
摘要：网格布局 Grid 布局，好用又简单，至少比 Flex 要人性化一点，美中不足就是浏览器支持度差点。 DOM结构 中间夹层为了后续拓展。 CSS .grid 的意思是网格布局，2 列平分宽度，单行为 10px，自动拓展行数，列间距 4px，超出高度滚动。 这里 10px 是颗粒度，颗粒度越小，效果越 阅读全文
posted @ 2018-10-13 19:53 污斑兔 阅读(3514) 评论(0) 推荐(0)
纯 CSS 解决自定义 CheckBox 背景颜色问题
摘要：CodePen 需要使用色 ec6337(当然可以是任意颜色)，解决问题：记住密码定制 CheckBox，解释全在注释里 主要使用到 ::before 或 ::after 伪类处理，伪装成内部的那个勾 html CSS(LESS) CodePen 阅读全文
posted @ 2017-12-01 18:16 污斑兔 阅读(21512) 评论(0) 推荐(1)