分享一个 CSS 小技巧 在平时开发中，经常会遇到这样一种问题：当打开一个弹窗时，后面的页面是可以滚动的，演示如下 那么，该如何锁定页面的滚动呢？ 一、传统的实现方式 传统的方式其实也不复杂，就是在打开弹窗时阻止滚动就行了，通常是改变 overflow 属性 <pre data-line="21" <section <span </span <span </span <span </span </section <code data-line="21" <span <span const</span <span openModal</span <span =</span <span (</span <span )</span <span = </span <span {</span <br/ </span <span <span document</span <span .</span <span body<...

Grid（网格）布局是最强大的 CSS 布局方案，用于构建二维布局。Grid 布局将页面划分成一个个网格，可以任意组合不同的网格，实现各种各样的布局。下面就来看看 CSS Grid 布局是如何使用的！ 1. Grid 布局概述 在解释 CSS Grid 布局之前，我们先来看看 Grid 布局中一些重要概念。 （1）网格容器 网格容器是所有网格项的父元素，网格容器会定义 display:grid 。下面例子中，类名为 container 的 div 元素就是网格容器： .container {  display: grid; } <div class="container"   <div class="item" 1</div   <div class="item" 2</div   <div class="item" 3</div   <div class="item" 4</div </div

介绍一些看似简单又不是那么容易的过渡小技巧。 很多 CSS 属性其实是不支持过渡变化的，例如 flex 中的对齐 <pre data-line="7" <section <span </span <span </span <span </span </section <code data-line="7" <span <span justify-content</span <span :</span start | center | end<br/ </span </code </pre 或者是文本对齐 <pre data-line="13" <section <span </span <span </span <span </span </section <code data-line="13" <span <span text-align</span <span :</span left | center | right<br/ </span </code </pre 这样属性在变化时是没有过渡动画的，但有时又需要这样的动效，比如下面这个效果 ![图片](h...

前言 对于前端人员来讲，最令人头疼的应该就是页面性能了，当用户在访问一个页面时，总是希望它能够快速呈现在眼前并且是可交互状态。如果页面加载过慢，你的用户很可能会因此离你而去。所以页面性能对于前端开发者来说可谓是重中之重，其实你如果了解页面从加载到渲染完成的整个过程，就知道应该从哪方面下手了。 嗯，不要跑偏了，今天我们主要来研究长列表页面的渲染性能 现如今的页面越来越复杂，一个页面往往承载着大量的元素，最常见的就是一些电商页面，数以万计的商品列表是怎么保证渲染不卡顿的，大家在面对这种长列表渲染的场景下，一般都会采用分页或者虚拟列表来减缓页面一次性渲染的压力，但这些方式都需要配合JS来时实现，那么有没有仅使用CSS就能够实现的方案呢？ 答案是有的，它就是我们今天的主角 —— 内容可见性（content-visibility） content-visibility 属性值 ❝ content-visibility 是CSS新增的属性，主要用来提高页面渲染性能，它可以控制一个元素是否渲染其内容，并且允许浏览器跳过这些元素的布局与渲染。 ❞ ...

在 Web 开发中，为了根据用户的偏好模式（明暗模式）调整网页颜色，我们以前可能会使用媒体查询（ prefers-color-scheme ）。如今，CSS提供了一种更为简便的方法： light-dark() 函数。此函数能够根据当前颜色方案自动选择两种颜色中的一种进行输出，从而实现颜色的自适应显示。 以前的明暗模式实现 要根据所使用的浅色模式或深色模式更改颜色值，可以使用 prefers-color-scheme 媒体查询来更改自定义属性的值： <pre data-line="12" <section <span <span </span <span </span <span </span </span <span </span </section <pre data-title="true" <code data-line="12" <span <span <span :root</span </span <span {</span <br/ </span <span <span --text-color</span <span :</span <spa...

随着技术的不断进步，CSS 已经从简单的样式表发展成为拥有众多内置函数的强大工具。这些函数不仅增强了开发者的设计能力，还使得样式应用更加动态、灵活和响应式。本文将深入探讨 CSS 常见的 66 个函数，逐一剖析它们的功能和用法，一起进入这个充满魔力的 CSS 函数世界！ 基础 attr() attr() 函数用于获取被选中元素的某个 HTML 属性值，并在样式文件中使用该值。这个函数也可以应用于伪类元素，此时它获取的是伪元素所依附的原始元素的属性值。 下面来看一个简单的例子： <pre data-line="12" <section <span <span </span <span </span <span </span </span <span </span </section <pre data-title="true" <code data-line="12" <span <span div</span <...

在平时开发中，有时候会碰到这样的彩色阴影，效果如下 是不是非常有质感？下面分别介绍 CSS 和 SVG 两种实现方式，一起看看吧 一、实现原理 从设计上看，其实原理很简单，一张原图和一张模糊的图，叠加在一起就行了，示意如下 那么具体如何实现呢？接着往下看 二、CSS 滤镜 首先，单纯的 CSS 并不能直接做出这种效果，毕竟无法生成一份相同的图片，因此，我们需要手动创建一个相同的图层。 假设 HTML 如下 <pre data-line="27" <section <span </span <span </span <span </span </section <code data-line="27" <span <span <span <span <</span d...

前言 今天无意看到一个登录页， input 框 focus 时 placeholder 上移变成 label 的效果，无聊没事干就想着自己来实现一下，登录页面能做文章的，普遍的就是按钮动画， title 的动画，以及 input 的动画，这是最终的效果图（如下）， 同时附上预览页以及实现源码。 title 的动画实现 首先描述一下大概的实现效果， 我们需要一个镂空的一段白底文字，在鼠标移入时给一个逐步点亮的效果。文字镂空我们可以使用 text-stroke , 逐步点亮只需要使用 filter 即可 text-stroke text-stroke 属性用于在文本的边缘周围添加描边效果，即文本字符的外部轮廓。这可以用于创建具有描边的文本效果。 text-stroke 属性通常与 -webkit-text-stroke 前缀一起使用，因为它目前 主要在WebKit浏览器（如Chrome和Safari）中...

序言 人的一生就是进行尝试，尝试的越多，生活就越美好。——爱默生 在前一阶段的工作中，突然接到了这个需求：_手写签批的页面在移动端竖屏时强制页面横屏展示进行签字_，一开始我觉着只要将页面使用 CSS3 的 transform 进行 rotate 一下就可以了，但是当我尝试后发现并不是像我想象的那样简单。 vue2实现手写签批 在介绍横屏签字之前，我想先说明一下我实现签批使用的插件以及插件所调用的方法，这样在之后说到横屏签字的时候，大佬们不会感觉唐突。 vue-signature-pad 项目使用 vue-signature-pad [1]插件进行签名功能实现，强调一下如果使用vue2进行开发，安装的 vue-signature-pad 的版本我自测 2.0.5 是可以的 安装 npm i vue-signature-pad@2.0.5 引入 // main.js import Vue from 'vue' import App from './App.vue' impor

1.自定义字体： 通过使用@[font-face]()规则，你可以在网站中应用自定义字体，增加独特性和品牌识别度。选择适合你网站风格的字体，并确保它们能够正确加载和显示。 2.渐变背景色： 使用CSS渐变背景色可以为你的网站添加华丽的外观。尝试不同类型的渐变，如线性渐变、径向渐变或重复渐变。通过指定起始颜色和结束颜色，你可以创建丰富多彩的背景效果。 .background {   background: linear-gradient(to right,  ff9900,  ff5500); } 3.动画效果： 利用CSS的过渡和动画属性，为你的网站添加动感效果。创建平滑的过渡、淡入淡出效果或引人注目的动画序列。通过定义动画的持续时间、延迟时间和重复次数，你可以控制动画的表现方式。 .box {   transition: background-color 0.3s ease-in-out; } .box:hover {   background-color:  ff5500; } 4.响应式布局： 使用CS

本文来分享 12 个超级实用的CSS 技巧，帮助你充分发挥 CSS 的优势，优化用户体验。 user-select user-select 属性可以用来控制用户是否能够选择文本。 <div <p You can't select this text.</p </div <p You can select this text.</p CSS： div { width: max-content; height: 40px; border: 3px solid purple; user-select: none; } 解析 ： user-select 属性用于控制用户是否能够选择文本。通过设置 user-select 属性，可以限制用户对文本的选择行为或禁止选择。该属性可以应用于任何 HTML 元素，并接受以下值： auto ：默认值，表示用户可以选择文本。 none ：禁止用户选择文本。 text ：允许用户选择文本，但不能选择元素的其他部分，如背景、边框

前言 面试官: webpack 生产环境构建时为什么要将 css 文件提取成单独的文件？ 我： 基于性能考虑，如可以进行缓存控制 面试官： 还有吗？ 我： 基于可读性考虑，独立的 css 文件更方便代码的阅读与调试 面试官： 那你有了解过 css 是怎么提取成单独文件的吗？ 我： 嗯...? 看完本篇之后，希望小伙伴面试的时候碰到这个问题时你的回答是这样的 面试官: webpack 生产环境构建时为什么要将 css 文件提取成单独的文件？ 你会这么回答 更好的缓存，当 CSS 和 JS 分开时，浏览器可以缓存 CSS 文件并重复使用，而不必重新加载，也不用因为js内容的变化，导致css缓存失效 更快的渲染速度，浏览器是同时可以并行加载多个静态资源，当我们将css从js中抽离出来时，能够加快js的加载与解析速度，最终加快页面的渲染速度 更好的代码可读性，独立的 css 文件更方便代码的阅读与调试 面试官: 那你有了解过 css 是怎么提取...

2023年，CSS 迎来了一系列令人兴奋的新特性，这些特性不仅增强了样式和布局的能力，还提升了开发者的效率和用户体验。本文将盘点并深入解析这些新特性，带你领略 CSS 的魅力！ 全文概览： 基础功能 三角函数 复杂的nth 选择器 @scope 嵌套 子网格 排版 Initial-letter text-wrap 颜色 高级色彩空间 color-mix 函数 相对颜色语法 响应式设计 容器大小查询 容器样式查询 :has() 选择器 更新媒体查询 脚本媒体查询 交互 视图转换 线性缓动函数 滚动结束 滚动驱动动画 timeline-scope 离散属性动画 @starting-style overlay 组件 Popover 选择框中的分隔线 :user-valid 和 :user-invalid 独占式手风琴 基础功能 首先来了

在平时开发中，有时候会碰到下面这种“弧形”样式，主要分为“内凹”和“外凸”两种类型，如下 该如何实现呢？或者想一下，有哪些 CSS 属性和“弧形”有关？下面介绍 3 种方式，一起看看吧 一、border-radius 通常情况下，我们用 border-radius 都是这样 <pre data-line="15" <section <span </span <span </span <span </span </section <code data-line="15" <span <span div</span {<br/ </span <span <span border-radius</span : <span 20</span px;<br/ </span <span }<br/ </span </code </pre 这样表示 4 个角都是圆角，并且是标准的正圆 ![图片](https://static.dev...

关于 Tailwind CSS 现在再提 tailwind css 也不是什么比较新鲜的事情了，已经有很多介绍的文章了，到目前来说，应该有不少新项目开始尝试使用它来开发样式了。比如说，next.js 的 cli 已经用 tailwind css 替代 css modules 了： 很早的时候其实就想接入 tailwind css 尝试了，原因无非就是那几样，原子化，design token，更主要的是终于不用再为 class 的命名去伤脑经了，但劝退我使用 tailwind css 的几个因素： 1. 新的东西，又带来新的学习成本 2. 感觉更适合新项目，我们的目前的项目使用的都是 css modules，引入进来以后，是不是只能新页面才能用，毕竟老页面一堆 css modules 文件不可能一点点去改，本来就不熟悉，改起来更费时间了 但后面还是还是接入了，接入以后发现上面的提到的劝退点还是不值一提的，对于问题1，实际使用的时候配合...