前端开发这么多年，有个心心念念的文字排版布局一直想要实现，那就是四面文字环绕效果，嘿，我发现，最近横空出世的pretext可以轻松实现这样的排版效果。
阅读全文…
标签：canvas, CSS Shapes, float, 文字, 文字排版 发布在 CSS相关 | 没有评论 »
CSS居然可以判断用户的鼠标是从上面进来的，还是从下面进来的，其实现原理非常巧妙，仿佛变魔术一般，有兴趣的可以进来了解一下。
标签：:has(), :not, CSS嵌套, css相关, hover, 交互 发布在 CSS相关 | 4 条评论 »
如题，介绍六边形头像的CSS实现技巧，以及如何基于这个六边形实现高大上的蜂巢布局效果，又是展现CSS潜力的一天。
标签：@property, container-type, corner-shape, direction, flex布局, grid, grid-column-start, if(), sibling-index() 发布在 CSS相关 | 4 条评论 »
corner-shape可以生成多种复杂的图形，那么，有没有什么办法把这些图形变成底纹背景呢？
标签：aspect-ratio, background, corner-shape, foreignObject, repeating-linear-gradient, SVG 发布在 CSS相关 | 2 条评论 »
卧靠，不仅点击popover交互纯CSS可以完全实现，现在就连任意Hover悬停交互效果也都只需要HTML和CSS就能实现了，其中的关键就是interestfor属性。
标签：:interest-source, :interest-target, hover, interestfor, label, popover, popovertarget 发布在 CSS相关, HTML相关 | 5 条评论 »
新出现了个CSS text-box属性，说是可以解决文字和图标对齐的问题，我实地试验了下，结果大跌眼镜。
标签：line-height, margin-trim, text-box, vertical-align, 对齐 发布在 CSS相关 | 3 条评论 »
CSS下划线，也就是text-decoration属性，现在支持设置下划线的左右缩进了，有兴趣的可以进来快速了解下。
标签：text-decoration, text-decoration-inset, text-decoration-style 发布在 CSS相关 | 4 条评论 »
借助CSS锚点定位，现在，我们可以使用CSS绘制折线，以连接任意位置的任意两个图形，有兴趣的可以进来了解下实现原理。
标签：@container, anchor-size(), container-type, cqw, linear-gradient, mask, opacity, 锚点定位 发布在 CSS相关 | 2 条评论 »
还在使用style元素和innerHTML在页面中插入CSS代码吗？试试使用CSSStyleSheet构造函数吧，更灵活更方便。
标签：:scope, @media, adoptedStyleSheets, attachShadow, createElement, CSSStyleSheet, replaceSync(), Shadow DOM, text-shadow 发布在 CSS相关, JS API | 2 条评论 »
CSS容器查询，继尺寸查询、滚动查询、锚点查询后，还支持样式查询，直接匹配CSS变量，更关键的是，和attr()、if()等函数配合使用后，场景适应性更是直线攀升。
标签：@container, anchor-name, attr(), container-name, content, CSS函数, if(), scroll-state, style, 容器 发布在 CSS相关 | 2 条评论 »
张鑫旭more，09年华中科技大学毕业，现上海，就职于阅文集团，专注web前端偏前领域，著有《CSS世界》《CSS选择器世界》《CSS新世界》《HTML并不简单》
邮箱：zhangxinxu@zhangxinxu.com
关注我：微信微博掘金知乎抖音热更B站Gitee
我的应用
我的应用