CSS技术分享: 文字在圆形内沿着弧线边界排版( 二 ) _CSS

no height, set it to ' + height + '!');this.style.height = height;}before.removeAttribute('style');// 样式设置shadow.querySelector('style').textContent = `:host {border-radius: 50%;}zxx-before,zxx-after {width: 50%; min-height: 100%; height: ${heightContent}px;}zxx-before {float: left;shape-outside: radial-gradient(farthest-side ellipse at right, transparent 100%, red);}zxx-after {float: right;shape-outside: radial-gradient(farthest-side ellipse at left, transparent 100%, red);}`;}}// 定义zxx-circle标签元素customElements.define('zxx-circle', HTMLZxxCircleElement);
眼见为实，您可以狠狠地点击这里：自定义元素优化文字在圆环内排版demo
如果高度是auto，则效果是下图这样：

文章插图
四、其他一些说明
Chrome浏览器下，这个左右浮动的CSS Shapes布局有个和搞笑的奇偶bug，其实上面这个图就有这个问题了，中间的文字莫名只显示了左边50%，右边50%没显示。
我看可以看下下面这个GIF录屏示意：

文章插图
和英文单词或者换行什么的都没有任何关系，全部都是中文也是这样，大家有兴趣可以去demo页面自己感受下。
抓紧机会，怕是过十几个版本这个问题就会被修复了。Firefox浏览器没有任何问题，表现完全OK 。
自定义元素的实现就是刚刚个把小时折腾了下，想要完全精准计算最佳高度，有些超出自己的能力范围了，只能大致处理下，欢迎有兴趣的人进行优化下。当元素高度auto的时候，精准计算左右Shapes图形的高度。
好了，就说这么多。
CSS Shapes布局 IE浏览器，Edge浏览器都不支持，目前适合中后台项目，或者移动端产品（老手机不支持的项目）。
【CSS技术分享: 文字在圆形内沿着弧线边界排版】非典型场景，但是，万一哪个小伙伴遇到这样的需求，说不定就帮了大忙。