CSS Clip-Path生成器 - 在线裁剪形状代码
拖拽顶点或选择预定义形状,可视生成CSS clip-path多边形、圆形、椭圆等,实时预览并复制代码。
UD5工具箱
letter-spacing(CSS属性)是对所有字符之间统一增加或减少的间距,无论字符对是什么。它也被称为"tracking"(字轨)。
kerning(字偶距)是字体设计师为特定字符对(如"AV"、"To"、"WA")手动调整的间距,嵌入在字体文件中。CSS通过font-kerning属性控制是否启用字体内置的字偶距信息。
简单记忆:letter-spacing是全局均匀调整;kerning是特定字符对的微调。在本工具中切换font-kerning开关,使用"AVATAR WAR"等文本可以观察到微妙差异。
推荐使用 em:因为 letter-spacing 使用 em 单位时,间距会随 font-size 自动缩放,保持比例一致。这是排版中的最佳实践。
px:固定像素值不会随字号变化,在响应式设计中可能导致字号变化时字距失调。但某些设计系统中为了方便也使用 px。
rem:相对于根元素字号,适用于需要全局统一字距的场景。1rem ≈ 16px(默认)。
在本工具中切换单位时,数值会自动转换,保持视觉上的字距一致。
中文字符本身就是方块字,默认间距较为紧凑。在中文排版中:
font-kerning 对中文字体基本无影响,因为中文字体通常不包含 kerning 表。负值 letter-spacing 让字符靠得更近,可以营造紧凑、有力的视觉效果,常用于海报标题或艺术字设计。
风险:负值过大(如低于-0.15em)会导致字符重叠,严重影响可读性。在用户生成内容或动态文本中应谨慎使用。
建议:正文避免使用负值字距;标题使用负值时建议在-0.02em到-0.08em范围内。
拖拽顶点或选择预定义形状,可视生成CSS clip-path多边形、圆形、椭圆等,实时预览并复制代码。
并列播放所有CSS内置缓动函数(ease, linear等)的动画效果,方便对比选择。
设定最小、首选、最大三个尺寸及视口范围,生成响应式CSS clamp()表达式。
选择多张图片或纯色叠加,切换所有CSS混合模式并实时预览图层效果。
搜索CSS属性,显示其在主流浏览器的支持范围和前缀需求,快速避免踩坑。
搜索CSS属性和选择器,展示在主流浏览器的支持版本和全局使用率百分比。
列出所有标准 CSS 光标值(pointer, grab, zoom-in 等),鼠标悬停实时查看对应光标样式并复制代码。
为页面上使用CSS Grid的元素显示网格线和名称,辅助布局开发和调试。
输入标题文本,尝试不同容器宽度,手动插入<br>或使用text-wrap:balance显示效果。
在页面上叠加可拖拽的半透明网格线,辅助网格布局对齐。
编写带有伪类的选择器,实时高亮匹配的HTML元素,探索现代CSS选择器的能力。
粘贴HTML和基本CSS,分析渲染后视觉顺序与DOM顺序的差异,避免可访问性问题。
制作像荧光笔划过的高亮背景或扫描下划线效果,导出类名。
调节宽度、颜色、条纹动画等参数,实时预览并生成进度条HTML/CSS。
上传精灵图,自动切片检测或手动框选获取背景定位数值,生成CSS Sprite代码。
为内容区域生成灰色闪烁的骨架屏占位代码,包含卡片、标题等组件样式。
自动生成适合打印的`@media print`样式,重置背景色、字号并隐藏导航。
输入新旧JSON,并排展示增删改的行级差异,辅助接口变动追踪。
批量将文本中的<,>,&,等转换为HTML实体,或反向还原,包含选项保留已转义实体。
调节光源角度、颜色和距离,生成凹凸柔和的新拟态UI元素CSS盒阴影代码,潮流设计工具。
显示文本中的非换行空格、全角空格等隐藏字符映射。
提取HTML中内联style属性或嵌入式style标签,转变为独立CSS规则,辅助样式重构。
创建 Shadow DOM 与普通 DOM 元素,对比样式隔离效果,理解 @layer 和 scoped styles。
创建带有向下箭头和自定选项风格的自定义选择框HTML+CSS代码。
通过勾选元素关系(子孙、兄弟)、属性、伪类等条件,自动生成精确的CSS选择器字符串。
在浏览器中即时测试for、forEach、map、for-of等循环的执行速度,帮助选择最优写法。
提取HTML中所有内嵌 `<style>` 标签的内容,合并生成单独CSS文件。
加载Lottie动画JSON文件,播放并控制速度、方向,预览动效效果。
浏览并一键复制常见CSS动画(跳动、淡入、滑动等)的@keyframes代码。
通过可视化控件定制滚动条轨道、滑块、按钮等伪元素样式,即时预览并复制生成代码。