2020年06月3日 by 张 鑫旭 阅读 18002 次, 今日 3 次
![路径面积计算多边形占位图](https://image.zhangxinxu.com/image/blog/202006/path-area-cover.jpg)
我写了一段JS,用来计算SVG任意图形元素,或者path字符串路径对应的面积大小,直接复制粘贴就可以用,希望可以解决你的开发需求。
阅读全文…
标签: cubic-bezier, path, polygon, SVG, 贝塞尔曲线, 路径
发布在 SVG相关 | 7 条评论 »
2020年05月27日 by 张 鑫旭 阅读 23833 次, 今日 7 次
![](https://image.zhangxinxu.com/image/blog/202005/rains-house.jpg)
CSS columns,就是分栏布局的columns属性,可以在不改变元素display值前提下实现两端对齐布局效果,说不定关键时候还是很有用的,可以来了解下这种CSS布局方法。
阅读全文…
标签: column-gap, columns, css相关, flex布局, gap, grid布局, list-item, ol, ul, 两端对齐
发布在 CSS相关 | 13 条评论 »
2020年05月12日 by 张 鑫旭 阅读 25419 次, 今日 5 次
![display: flow-root封面图](https://image.zhangxinxu.com/image/blog/202005/flow-root-cover.png)
display:flow-root可以让元素块状化,同时包含格式化上下文BFC,可以用来清除浮动,去除margin合并,实现两栏自适应布局等。
阅读全文…
标签: BFC, css相关, display:flow, display:flow-root, float, overflow:hidden, position, 格式化上下文
发布在 CSS相关 | 12 条评论 »
2020年05月8日 by 张 鑫旭 阅读 22460 次, 今日 1 次
![遮罩压缩PNG封面图](//image.zhangxinxu.com/image/blog/202005/png-nmask-cover.jpg)
带有透明区域,同时色彩丰富的PNG图片再怎么压缩体积也是很大的,有没有什么办法既保持PNG图片的透明,又显著降低图片的尺寸呢?本文就将介绍如何使用CSS遮罩降低超过50%大小的PNG体积,优化性能。
阅读全文…
标签: css相关, jpeg, mask, mask-image, png, 前端性能, 图片压缩, 性能优化
发布在 CSS相关 | 17 条评论 »
2020年04月20日 by 张 鑫旭 阅读 22796 次, 今日 3 次
![](https://image.zhangxinxu.com/image/blog/202004/conic-gradient-cover.jpg)
锥形渐变是CSS Images Module Level 4规范中新定义的一种渐变,可以非常方便实现过去很难实现的效果,例如饼图,色板,棋盘等各种效果,CSS开发必学必会技能。
阅读全文…
标签: conic-gradient, css-gradient, linear-gradient, radial-gradient, 径向渐变, 线性渐变, 锥形渐变
发布在 CSS相关 | 5 条评论 »
2020年04月16日 by 张 鑫旭 阅读 18019 次, 今日 6 次
![不错的情侣封面图](//image.zhangxinxu.com/image/blog/202004/nice-cover.png)
ES6 新增了很多Math方法,扩展了一些Number新特性,本文就对相关知识进行的整理和说明,希望可以对您的学习有所帮助。
阅读全文…
标签: ES6, isFinite, isInteger, isNaN, isSafeInteger, Math.cbrt, Math.fround, Math.hypot, Math.sign, Number, parseFloat, parseInt, 进制转换
发布在 JS API | 6 条评论 »
2020年04月12日 by 张 鑫旭 阅读 25352 次, 今日 8 次
![CSS数学函数封面](//image.zhangxinxu.com/image/blog/202004/min-max-clamp-cover.png)
目前主流浏览器都已经支持了CSS min()/max()/clamp()数学函数,可以让你的布局和样式表现更加的智能。
阅读全文…
标签: calc, clamp(), CSS函数, CSS数学函数, CSS计算, max(), min, minmax()
发布在 CSS相关 | 13 条评论 »
2020年04月9日 by 张 鑫旭 阅读 26978 次, 今日 2 次
Text around![文字环形排版占位图](//image.zhangxinxu.com/image/blog/202004/cover-circle.jpg)
有一个正圆或者椭圆,里面有一些文字,如何让这些文字每一行的边缘正好就是圆弧的边缘而不发生溢出呢?本文就将介绍这个CSS布局技巧,希望可以帮到大家的学习。
阅读全文…
标签: border-radius, CSS Shapes, css相关, farthest-side, radial-gradient, Shadow DOM, shape布局, 文字排版, 自定义元素
发布在 CSS相关 | 6 条评论 »
2020年04月8日 by 张 鑫旭 阅读 46807 次, 今日 8 次
![avif图像格式](//image.zhangxinxu.com/image/blog/202004/13-09-cover.png)
AVIF图像格式被誉为下一代图片压缩格式,究竟有什么魔力让其如此口出狂言呢,不妨一起进来看一看。
阅读全文…
标签: APNG, AVIF, HEIF, HEVC, https, jpeg, Service Workers, webP, 图片, 图片压缩
发布在 Graphic相关 | 17 条评论 »
2020年03月21日 by 张 鑫旭 阅读 30109 次, 今日 5 次
![波浪线头图占位图](//image.zhangxinxu.com/image/blog/201904/wavy-thumb.jpg)
波浪线效果CSS 径向渐变可以绘制,SVG也可以实现,这里介绍另外一个自己想到的实现方法,使用text-decoration实现宽度100%波浪线效果,易理解易上手,尺寸可控,颜色可控。
阅读全文…
标签: content, css相关, letter-spacing, text-decoration, vw, white-space, 径向渐变, 波浪线
发布在 CSS相关 | 6 条评论 »