锥形渐变是CSS Images Module Level 4规范中新定义的一种渐变,可以非常方便实现过去很难实现的效果,例如饼图,色板,棋盘等各种效果,CSS开发必学必会技能。
阅读全文…
标签:conic-gradient, css-gradient, linear-gradient, radial-gradient, 径向渐变, 线性渐变, 锥形渐变 发布在 CSS相关 | 5 条评论 »
目前主流浏览器都已经支持了CSS min()/max()/clamp()数学函数,可以让你的布局和样式表现更加的智能。
标签:calc, clamp(), CSS函数, CSS数学函数, CSS计算, max(), min, minmax() 发布在 CSS相关 | 13 条评论 »
有一个正圆或者椭圆,里面有一些文字,如何让这些文字每一行的边缘正好就是圆弧的边缘而不发生溢出呢?本文就将介绍这个CSS布局技巧,希望可以帮到大家的学习。
标签:border-radius, CSS Shapes, css相关, farthest-side, radial-gradient, Shadow DOM, shape布局, 文字排版, 自定义元素 发布在 CSS相关 | 7 条评论 »
波浪线效果CSS 径向渐变可以绘制,SVG也可以实现,这里介绍另外一个自己想到的实现方法,使用text-decoration实现宽度100%波浪线效果,易理解易上手,尺寸可控,颜色可控。
标签:content, css相关, letter-spacing, text-decoration, vw, white-space, 径向渐变, 波浪线 发布在 CSS相关 | 6 条评论 »
先介绍overflow-wrap属性,再介绍overflow-wrap新出了一个属性值anywhere,说不定在以后文字排版布局时候用得上。
标签:anywhere, break-all, CJK文本, css相关, overflow-wrap, word-break, word-wrap, 字符换行 发布在 CSS相关 | 6 条评论 »
关于Emoji字体你可能不知道的一些知识,顺便简单介绍了下彩色字体标准之一的OpenType SVG字体的一些知识。
标签:emoji字体, font-face, font-family, font-feature-settings, font-plattle, OpenType-SVG, Segoe UI, system-ui, unicode-range 发布在 CSS相关 | 4 条评论 »
sticky粘性定位规则比较复杂,涉及“流盒”(flow box)和“粘性约束矩形”等概念,如果不搞清楚原理,是无法明白明明设置了粘性定位样式却没有效果的原因的。
标签:bottom, css相关, flow box, left, position, right, sticky, top, 定位, 流盒, 滚动, 粘性定位, 粘性约束矩形 发布在 CSS相关 | 25 条评论 »
介绍两种我常用的将CSS媒体查询信息传递给JS的方法,一种是伪元素+content属性发,一种是CSS var自定义属性方法,这样传参有助于降低开发成本,让CSS和JS在一些条件信息上保持一致。
标签:@media, any-hover, css var, CSS变量, hover, prefers-color-scheme, screen, var 发布在 CSS相关, JS实例 | 18 条评论 »
CSS @supports规则现在不仅支持CSS新的属性或者属性值的检测,还支持selector选择器的检测,真是越来越强大了,语法很简单,但是还是有一些需要注意的细节知识。
标签::default, :is, :target-within, @supports, nth-child, selector, 选择器 发布在 CSS相关 | 一条评论 »
大屏的触屏设备访问我们的传统网页的时候,CSS any-hover any-pointer等媒体查询可以极大地提升我们产品的用户体验。
标签:@media, any-hover, any-pointer, css相关, hover, media queries, pointer, 用户体验 发布在 CSS相关 | 5 条评论 »
张鑫旭more,09年华中科技大学毕业,现上海,就职于阅文集团,专注web前端偏前领域,著有《CSS世界》《CSS选择器世界》《CSS新世界》《HTML并不简单》
邮箱:zhangxinxu@zhangxinxu.com
关注我:微信微博掘金知乎抖音热更B站Gitee