2020年06月12日 by 张 鑫旭 阅读 9423 次, 今日 37 次
今天要JS实现一个手机中双指缩放的需求，本以为很简单，结果遇到了意料之外的状况，特意记录下来和大家分享，有demo演示，也有精简的JavaScript代码，以后说不定用得到，可以mark下。
阅读全文…
标签： event.touches, javascript, Math.hypot, scale, touch-action, touchmove, 双指缩放, 手机
发布在 JS实例 | 7 条评论 »
2020年06月7日 by 张 鑫旭 阅读 4756 次, 今日 11 次
带大家了解下gap属性的前世今生，了解gap属性在CSS世界3大布局中的过往和现状。
阅读全文…
标签： column-gap, columns, flex布局, gap, grid布局, justify-content, Multi-column布局, row-gap
发布在 CSS相关 | 3 条评论 »
2020年06月3日 by 张 鑫旭 阅读 5661 次, 今日 24 次
我写了一段JS，用来计算SVG任意图形元素，或者path字符串路径对应的面积大小，直接复制粘贴就可以用，希望可以解决你的开发需求。
阅读全文…
标签： cubic-bezier, path, polygon, SVG, 贝塞尔曲线, 路径
发布在 SVG相关 | 5 条评论 »
2020年05月27日 by 张 鑫旭 阅读 8653 次, 今日 27 次
CSS columns，就是分栏布局的columns属性，可以在不改变元素display值前提下实现两端对齐布局效果，说不定关键时候还是很有用的，可以来了解下这种CSS布局方法。
阅读全文…
标签： column-gap, columns, css相关, flex布局, gap, grid布局, list-item, ol, ul, 两端对齐
发布在 CSS相关 | 10 条评论 »
2020年05月12日 by 张 鑫旭 阅读 7524 次, 今日 19 次
display:flow-root可以让元素块状化，同时包含格式化上下文BFC，可以用来清除浮动，去除margin合并，实现两栏自适应布局等。
阅读全文…
标签： BFC, css相关, display:flow, display:flow-root, float, overflow:hidden, position, 格式化上下文
发布在 CSS相关 | 10 条评论 »
2020年05月8日 by 张 鑫旭 阅读 7853 次, 今日 26 次
带有透明区域，同时色彩丰富的PNG图片再怎么压缩体积也是很大的，有没有什么办法既保持PNG图片的透明，又显著降低图片的尺寸呢？本文就将介绍如何使用CSS遮罩降低超过50%大小的PNG体积，优化性能。
阅读全文…
标签： css相关, jpeg, mask, mask-image, png, 前端性能, 图片压缩, 性能优化
发布在 CSS相关 | 16 条评论 »
2020年04月20日 by 张 鑫旭 阅读 7042 次, 今日 14 次
锥形渐变是CSS Images Module Level 4规范中新定义的一种渐变，可以非常方便实现过去很难实现的效果，例如饼图，色板，棋盘等各种效果，CSS开发必学必会技能。
阅读全文…
标签： conic-gradient, css-gradient, linear-gradient, radial-gradient, 径向渐变, 线性渐变, 锥形渐变
发布在 CSS相关 | 3 条评论 »
2020年04月16日 by 张 鑫旭 阅读 7771 次, 今日 12 次
ES6 新增了很多Math方法，扩展了一些Number新特性，本文就对相关知识进行的整理和说明，希望可以对您的学习有所帮助。
阅读全文…
标签： ES6, isFinite, isInteger, isNaN, isSafeInteger, Math.cbrt, Math.fround, Math.hypot, Math.sign, Number, parseFloat, parseInt, 进制转换
发布在 JS API | 5 条评论 »
2020年04月12日 by 张 鑫旭 阅读 8526 次, 今日 26 次
目前主流浏览器都已经支持了CSS min()/max()/clamp()数学函数，可以让你的布局和样式表现更加的智能。
阅读全文…
标签： calc, clamp(), CSS函数, CSS数学函数, CSS计算, max(), min, minmax()
发布在 CSS相关 | 11 条评论 »
2020年04月9日 by 张 鑫旭 阅读 8207 次, 今日 17 次
Text around
有一个正圆或者椭圆，里面有一些文字，如何让这些文字每一行的边缘正好就是圆弧的边缘而不发生溢出呢？本文就将介绍这个CSS布局技巧，希望可以帮到大家的学习。
阅读全文…
标签： border-radius, CSS Shapes, css相关, farthest-side, radial-gradient, Shadow DOM, shape布局, 文字排版, 自定义元素
发布在 CSS相关 | 6 条评论 »
我的应用
我的应用