随笔分类 - css样式
摘要：
今天推荐一个专为Vue 3设计的轻量方案——vfit，通过“全局缩放管理+组件化定位”的思路，让适配工作变得简单可控。 为什么需要vfit？ 传统适配方案（如rem、vw/vh）的痛点在于： 仅能处理“大小”适配，难以保证“位置”在不同分辨率下的一致性； 需手动维护基准值，缩放逻辑与业务代码耦合；
阅读全文
今天推荐一个专为Vue 3设计的轻量方案——vfit，通过“全局缩放管理+组件化定位”的思路，让适配工作变得简单可控。 为什么需要vfit？ 传统适配方案（如rem、vw/vh）的痛点在于： 仅能处理“大小”适配，难以保证“位置”在不同分辨率下的一致性； 需手动维护基准值，缩放逻辑与业务代码耦合；
阅读全文
摘要：
不是什么奇技淫巧，但是一行css代码可能让你省下js代码，作为前端的你变得更加专业： 1. 阻止鼠标选择文本 .no-select { user-select: none } 阻止用户在页面上选择文本。 2. 响应式文字大小 /* Fixed minimum value below the mini
阅读全文
不是什么奇技淫巧，但是一行css代码可能让你省下js代码，作为前端的你变得更加专业： 1. 阻止鼠标选择文本 .no-select { user-select: none } 阻止用户在页面上选择文本。 2. 响应式文字大小 /* Fixed minimum value below the mini
阅读全文
摘要：
背景 在学习 CSS 时，你可能会忽略一些鲜为人知但实用的功能。下面介绍 几 个 CSS 小技巧，从背景聚焦效果到宽高比控制，让你的页面设计更灵活、更具视觉冲击力！ 1. 父元素聚焦效果：:focus-within 功能介绍：当一个表单输入框获得焦点时，使用 :focus-within 可以让包含这
阅读全文
背景 在学习 CSS 时，你可能会忽略一些鲜为人知但实用的功能。下面介绍 几 个 CSS 小技巧，从背景聚焦效果到宽高比控制，让你的页面设计更灵活、更具视觉冲击力！ 1. 父元素聚焦效果：:focus-within 功能介绍：当一个表单输入框获得焦点时，使用 :focus-within 可以让包含这
阅读全文
摘要：
前言 苹果在 WWDC25 发布了全新的液态玻璃（Liquid Glass）设计风格。 根据苹果官方介绍： Liquid Glass 统一了 Apple 平台的设计语言，同时提供更生动、更富表达力的用户体验。 Liquid Glass 是一种半透明材质，采用「反射+折射+动态变形」的复合渲染机制，营
阅读全文
前言 苹果在 WWDC25 发布了全新的液态玻璃（Liquid Glass）设计风格。 根据苹果官方介绍： Liquid Glass 统一了 Apple 平台的设计语言，同时提供更生动、更富表达力的用户体验。 Liquid Glass 是一种半透明材质，采用「反射+折射+动态变形」的复合渲染机制，营
阅读全文
摘要：
当我第一次看到这动画效果时，还以为是通过 GIF、CSS3 或者 Canvas 制作的。结果出乎意料，居然是用 SVG 实现的！ 也许你对 SVG 动画还不太熟悉，那就让我们一起开启这场奇妙的旅程吧！ 什么是 SVG 动画？ SVG（Scalable Vector Graphics）是一种用于描述二
阅读全文
当我第一次看到这动画效果时，还以为是通过 GIF、CSS3 或者 Canvas 制作的。结果出乎意料，居然是用 SVG 实现的！ 也许你对 SVG 动画还不太熟悉，那就让我们一起开启这场奇妙的旅程吧！ 什么是 SVG 动画？ SVG（Scalable Vector Graphics）是一种用于描述二
阅读全文
摘要：
在移动端H5项目中，首页白屏时间过长会严重影响用户体验，导致用户流失和跳出率上升。本文将从白屏时间的定义、常见原因、优化方案等方面，详细讲解如何有效缩短H5首页的白屏时间。 一、白屏时间的定义 白屏时间通常指的是用户从点击页面到看到首屏内容所经历的时间，通常包括以下几个关键阶段： DNS解析：浏览器
阅读全文
在移动端H5项目中，首页白屏时间过长会严重影响用户体验，导致用户流失和跳出率上升。本文将从白屏时间的定义、常见原因、优化方案等方面，详细讲解如何有效缩短H5首页的白屏时间。 一、白屏时间的定义 白屏时间通常指的是用户从点击页面到看到首屏内容所经历的时间，通常包括以下几个关键阶段： DNS解析：浏览器
阅读全文
摘要：
1. 深度选择器的背景 在 Vue 组件的 scoped 样式中，CSS 选择器默认仅作用于当前组件的 DOM 元素，无法直接影响子组件的内容。为了提供一种方法可以“深入”子组件的结构并应用样式，Vue 引入了深度选择器。 2. 何为深度选择器？ 深度选择器用于在 scoped 样式中穿透子组件的样
阅读全文
1. 深度选择器的背景 在 Vue 组件的 scoped 样式中，CSS 选择器默认仅作用于当前组件的 DOM 元素，无法直接影响子组件的内容。为了提供一种方法可以“深入”子组件的结构并应用样式，Vue 引入了深度选择器。 2. 何为深度选择器？ 深度选择器用于在 scoped 样式中穿透子组件的样
阅读全文
摘要：
先有问题再有答案 滚动的前提是什么 浏览器提供了哪些滚动api scroll, scrollTo, scrollBy, scrollIntoView 有什么区别？ 这些api具体如何使用 这些api在使用上有什么问题 如何实现一个smooth效果的scrollTo api？ offsetTop、of
阅读全文
先有问题再有答案 滚动的前提是什么 浏览器提供了哪些滚动api scroll, scrollTo, scrollBy, scrollIntoView 有什么区别？ 这些api具体如何使用 这些api在使用上有什么问题 如何实现一个smooth效果的scrollTo api？ offsetTop、of
阅读全文
摘要：
当年这可能是一个典型的CSS面试题：“两列布局”。很多年前（大约是10年前吧），有过这样的一个面试题： 两列布局，左侧列宽度是20%，右侧列是80%，两列之间的间距是20px，CSS怎样实现这样的一个布局，而且不会出现滚动条！ 对于题主这个问题，早在当年可能会较为蛋疼一点，或许很多开发者会采用 Ja
阅读全文
当年这可能是一个典型的CSS面试题：“两列布局”。很多年前（大约是10年前吧），有过这样的一个面试题： 两列布局，左侧列宽度是20%，右侧列是80%，两列之间的间距是20px，CSS怎样实现这样的一个布局，而且不会出现滚动条！ 对于题主这个问题，早在当年可能会较为蛋疼一点，或许很多开发者会采用 Ja
阅读全文
摘要：
在移动端开发中，经常会碰到需要横向滚动的场景，例如这样的 但很多时候是不需要展示这个滚动条的，也就是这样的效果，如下 你可能想到直接设置滚动条样式就可以了，就像这样 ::-webkit-scrollbar { display: none; } 目前来看好像没什么问题，但在某些版本的 iOS 上却无效
阅读全文
在移动端开发中，经常会碰到需要横向滚动的场景，例如这样的 但很多时候是不需要展示这个滚动条的，也就是这样的效果，如下 你可能想到直接设置滚动条样式就可以了，就像这样 ::-webkit-scrollbar { display: none; } 目前来看好像没什么问题，但在某些版本的 iOS 上却无效
阅读全文
摘要：
一、“切图”的局限性 传统的“切图”简单暴力，但往往缺少适应性。 适应性一般有两种，一是尺寸自适应，二是颜色可以自定义。 举个例子，有这样一个优惠券样式 关于这类样式实现技巧，之前在这篇文章中有详细介绍： CSS 实现优惠券的技巧 不过这里略微不一样的地方是，两个凹陷处都是平滑处理的 单纯实现内凹圆
阅读全文
一、“切图”的局限性 传统的“切图”简单暴力，但往往缺少适应性。 适应性一般有两种，一是尺寸自适应，二是颜色可以自定义。 举个例子，有这样一个优惠券样式 关于这类样式实现技巧，之前在这篇文章中有详细介绍： CSS 实现优惠券的技巧 不过这里略微不一样的地方是，两个凹陷处都是平滑处理的 单纯实现内凹圆
阅读全文
摘要：
最近在项目中碰到这样一个布局，有一个列表，先按照 4 * 2 的正常顺序排列，当超过 8 个后，会横向重新开始 4 * 2 的布局，有点像一个个独立的分组，然后水平排列，如下 图中序号是 dom 序列，所以其实这这样的一个顺序 很多同学可能会想到给子元素分组（通过 JS将原数组拆分组合成一个二维数组
阅读全文
最近在项目中碰到这样一个布局，有一个列表，先按照 4 * 2 的正常顺序排列，当超过 8 个后，会横向重新开始 4 * 2 的布局，有点像一个个独立的分组，然后水平排列，如下 图中序号是 dom 序列，所以其实这这样的一个顺序 很多同学可能会想到给子元素分组（通过 JS将原数组拆分组合成一个二维数组
阅读全文
摘要：
在最新的Chrome 115中，令人无比期待的CSS 滚动驱动动画(CSS scroll-driven animations)终于正式支持了\~有了它，几乎以前任何需要JS监听滚动的交互都可以纯 CSS 实现了，就是这么强大，一起了解一下吧 温馨提示：文章略长，建议收藏后反复查阅 一、快速入门 CS
阅读全文
在最新的Chrome 115中，令人无比期待的CSS 滚动驱动动画(CSS scroll-driven animations)终于正式支持了\~有了它，几乎以前任何需要JS监听滚动的交互都可以纯 CSS 实现了，就是这么强大，一起了解一下吧 温馨提示：文章略长，建议收藏后反复查阅 一、快速入门 CS
阅读全文
摘要：
羽化是photoshop术语，羽化原理是令选区内外衔接部分虚化，起到渐变的作用从而达到自然衔接的效果，是ps及其其它版本中的处理图片的重要工具。 一、羽化的原理 羽化其实就是将边缘变得模糊，在 CSS 中其实就是创建一个边缘模糊的遮罩（mask），也就是需要一种半透明的渐变。 关于遮罩，这里简单介绍
阅读全文
羽化是photoshop术语，羽化原理是令选区内外衔接部分虚化，起到渐变的作用从而达到自然衔接的效果，是ps及其其它版本中的处理图片的重要工具。 一、羽化的原理 羽化其实就是将边缘变得模糊，在 CSS 中其实就是创建一个边缘模糊的遮罩（mask），也就是需要一种半透明的渐变。 关于遮罩，这里简单介绍
阅读全文
摘要：
问题： 如果在img上直接使用CSS3的border-radius和box-shadow应用在图片，浏览器并不会完全显示。前面在《jQuery和CSS3给图片制作圆角》中说过其解决方法，就是把图片作为背景图片，这样我们就可以应用任何样式来修饰图片，而且此时浏览器也会完美的呈现出来。 解决方法： 要让
阅读全文
问题： 如果在img上直接使用CSS3的border-radius和box-shadow应用在图片，浏览器并不会完全显示。前面在《jQuery和CSS3给图片制作圆角》中说过其解决方法，就是把图片作为背景图片，这样我们就可以应用任何样式来修饰图片，而且此时浏览器也会完美的呈现出来。 解决方法： 要让
阅读全文
摘要：
一、 css3 transform 变换 translate(x,y) 设置盒子的位移 scale（x,y)设置盒子缩放 roate（dog) 设置盒子的旋转 skew（x-angle,y-angle） 设置盒子的斜切 perspective 设置透视距离 transform-styoleflat
阅读全文
一、 css3 transform 变换 translate(x,y) 设置盒子的位移 scale（x,y)设置盒子缩放 roate（dog) 设置盒子的旋转 skew（x-angle,y-angle） 设置盒子的斜切 perspective 设置透视距离 transform-styoleflat
阅读全文
摘要：
在一个复杂的背景上添加文字，文字能清晰展示，并尽可能的保留原背景的话，使用毛玻璃的效果去处理是非常合适的。 一、背景图毛玻璃 在 PhotoShop 中，毛玻璃主要使用 高斯模糊 和 羽化 。说白了就是模糊。 在 CSS 中，想要实现模糊效果，可以使用 滤镜 。背景通常设置成黑色、灰色或者白色，然后
阅读全文
在一个复杂的背景上添加文字，文字能清晰展示，并尽可能的保留原背景的话，使用毛玻璃的效果去处理是非常合适的。 一、背景图毛玻璃 在 PhotoShop 中，毛玻璃主要使用 高斯模糊 和 羽化 。说白了就是模糊。 在 CSS 中，想要实现模糊效果，可以使用 滤镜 。背景通常设置成黑色、灰色或者白色，然后
阅读全文
摘要：
1. 禁用鼠标事件、移动端禁止图片长按保存功能（PC端禁止鼠标点击事件，移动端禁止触摸事件还有长按事件） .no-events { pointer-events: none } 2.移动端禁止用户长按文字选择功能 .unselect { -webkit-touch-callout:none; -we
阅读全文
1. 禁用鼠标事件、移动端禁止图片长按保存功能（PC端禁止鼠标点击事件，移动端禁止触摸事件还有长按事件） .no-events { pointer-events: none } 2.移动端禁止用户长按文字选择功能 .unselect { -webkit-touch-callout:none; -we
阅读全文
摘要：
要使用 CSS 美化被选中的文字，可以使用 ::selection 伪元素选择器来设置样式。该选择器会选中用户在页面上所选中的文本，因此您可以使用它来应用样式来改变文本的外观。 例如，要将被选中的文本的背景色设置为黄色，可以使用以下 CSS 代码： ::selection { background-
阅读全文
要使用 CSS 美化被选中的文字，可以使用 ::selection 伪元素选择器来设置样式。该选择器会选中用户在页面上所选中的文本，因此您可以使用它来应用样式来改变文本的外观。 例如，要将被选中的文本的背景色设置为黄色，可以使用以下 CSS 代码： ::selection { background-
阅读全文
摘要：
1.文字溢出显示省略号 单行文字： 一定要设置宽度 p{ • width:200px; • overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 多行文字溢出显示省略号p{display:-webkit-bo
阅读全文
1.文字溢出显示省略号 单行文字： 一定要设置宽度 p{ • width:200px; • overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 多行文字溢出显示省略号p{display:-webkit-bo
阅读全文
浙公网安备 33010602011771号