
html椭圆形布局之妙招
在HTML中实现椭圆形布局,可以通过巧妙利用offset-path和offset-distance属性。这一布局的优势在于,它能自动分配座位位置,无需进行繁琐的单独计算。
要生成椭圆形的路径,可以使用设计软件生成SVG,然后将其转换为路径。转换网站:https://www.zhangxinxu.com/sp...
下面是一个简单的示例:https://runjs.work/projects/7...
num{
position: absolute;
offset-path: path('M0 102.5a102.5 102.5 0 0 1 102.5 -102.5h237a102.5 102.5 0 0 1 102.5 102.5v0a102.5 102.5 0 0 1 -102.5 102.5h-237a102.5 102.5 0 0 1 -102.5 -102.5z');
offset-distance: calc( var(--i) * 10% / 1.4);
offset-rotate: 0deg;
}可以通过调整一些参数来自行修改布局。更多相关技巧,可以参考文章:https://segmentfault.com/a/11...
立即学习“前端免费学习笔记(深入)”;











