使用 uniapp 写微信小程序端项目，css 使用 var 注入变量，达到设置动态样式的需求 声明 css 变量时，变量名前面要加两根连词线（--）； 变量使用 kebab-case 命名方式，即 --header-color 而不是 --headerColor； 变量名大小写敏感，--heade 阅读全文
mini-smooth-signature 小程序版带笔锋手写签名，支持多平台小程序使用 参考：GitHub - linjc/smooth-signature: H5带笔锋手写签名，支持PC端和移动端，任何前端框架均可使用 一、安装 npm install smooth-signature # 或 阅读全文
在移动端开发中，经常会碰到需要横向滚动的场景，例如这样的 但很多时候是不需要展示这个滚动条的，也就是这样的效果，如下 你可能想到直接设置滚动条样式就可以了，就像这样 ::-webkit-scrollbar { display: none; } 目前来看好像没什么问题，但在某些版本的 iOS 上却无效 阅读全文
一、“切图”的局限性 传统的“切图”简单暴力，但往往缺少适应性。 适应性一般有两种，一是尺寸自适应，二是颜色可以自定义。 举个例子，有这样一个优惠券样式 关于这类样式实现技巧，之前在这篇文章中有详细介绍： CSS 实现优惠券的技巧 不过这里略微不一样的地方是，两个凹陷处都是平滑处理的 单纯实现内凹圆 阅读全文
最近在项目中碰到这样一个布局，有一个列表，先按照 4 * 2 的正常顺序排列，当超过 8 个后，会横向重新开始 4 * 2 的布局，有点像一个个独立的分组，然后水平排列，如下 图中序号是 dom 序列，所以其实这这样的一个顺序 很多同学可能会想到给子元素分组（通过 JS将原数组拆分组合成一个二维数组 阅读全文
在最新的Chrome 115中，令人无比期待的CSS 滚动驱动动画(CSS scroll-driven animations)终于正式支持了\~有了它，几乎以前任何需要JS监听滚动的交互都可以纯 CSS 实现了，就是这么强大，一起了解一下吧 温馨提示：文章略长，建议收藏后反复查阅 一、快速入门 CS 阅读全文
羽化是photoshop术语，羽化原理是令选区内外衔接部分虚化，起到渐变的作用从而达到自然衔接的效果，是ps及其其它版本中的处理图片的重要工具。 一、羽化的原理 羽化其实就是将边缘变得模糊，在 CSS 中其实就是创建一个边缘模糊的遮罩（mask），也就是需要一种半透明的渐变。 关于遮罩，这里简单介绍 阅读全文
问题： 如果在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 阅读全文
在一个复杂的背景上添加文字，文字能清晰展示，并尽可能的保留原背景的话，使用毛玻璃的效果去处理是非常合适的。 一、背景图毛玻璃 在 PhotoShop 中，毛玻璃主要使用 高斯模糊 和 羽化 。说白了就是模糊。 在 CSS 中，想要实现模糊效果，可以使用 滤镜 。背景通常设置成黑色、灰色或者白色，然后 阅读全文
![解决 scroll-view 组件 [Intervention] 报错](https://img2024.cnblogs.com/blog/2696162/202403/2696162-20240323102304389-268455431.png)
[Intervention]Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupte 阅读全文
