三月 « 2020 « 张鑫旭-鑫空间-鑫生活

2020年03月存档

CSS text-decoration实现宽度100%波浪线效果

2020年03月21日，星期六

波浪线效果CSS 径向渐变可以绘制，SVG也可以实现，这里介绍另外一个自己想到的实现方法，使用text-decoration实现宽度100%波浪线效果，易理解易上手，尺寸可控，颜色可控。

阅读全文…

标签：content, css相关, letter-spacing, text-decoration, vw, white-space, 径向渐变, 波浪线

发布在 CSS相关 | 6 条评论 »

CSS overflow-wrap新属性值anywhere是干嘛用的？

2020年03月18日，星期三

先介绍overflow-wrap属性，再介绍overflow-wrap新出了一个属性值anywhere，说不定在以后文字排版布局时候用得上。

阅读全文…

标签：anywhere, break-all, CJK文本, css相关, overflow-wrap, word-break, word-wrap, 字符换行

发布在 CSS相关 | 5 条评论 »

关于CSS emoji字体和OpenType-SVG我所知道的一些事

2020年03月12日，星期四

关于Emoji字体你可能不知道的一些知识，顺便简单介绍了下彩色字体标准之一的OpenType SVG字体的一些知识。

阅读全文…

标签：emoji字体, font-face, font-family, font-feature-settings, OpenType-SVG, Segoe UI, system-ui, unicode-range

发布在 CSS相关 | 3 条评论 »

检测DOM尺寸变化JS API ResizeObserver简介

2020年03月8日，星期日

头图占位图

JS ResizeObserver这个全新的API可以用来观察与检测DOM元素尺寸的变化，很多以前不好实现的需求这下有了高性能高质量的解决方案了。

阅读全文…

标签：borderBoxSize, content-box, contentBoxSize, contentRect, DOMRect, javascript, MutationObserver, resize, ResizeObserver, textarea, 数据埋点

发布在 JS API | 5 条评论 »

深入理解position sticky粘性定位的计算规则

2020年03月7日，星期六

sticky粘性定位规则比较复杂，涉及“流盒”（flow box）和“粘性约束矩形”等概念，如果不搞清楚原理，是无法明白明明设置了粘性定位样式却没有效果的原因的。

阅读全文…

标签：bottom, css相关, flow box, left, position, right, sticky, top, 定位, 流盒, 滚动, 粘性定位, 粘性约束矩形

发布在 CSS相关 | 13 条评论 »