弧形區域文字排版

一： 效果圖展示

 

 正常的文字排版是自左向右的排版顯示的。

二： html結構

    <div class="box">
        <before></before>
        <after></after>
        昨夜的月亮是真的大啊。不知道你有沒有看到？不知道你有沒有邀月寄相思呢？想起了北方此時的柳絮飄飛
        昨夜的月亮是真的大啊。不知道你有沒有看到？不知道你邀月寄相思。
    </div>

三： 樣式

    .box {
        border-radius: 50%;
        width: 207px;
        height: 250px;
        background-color: #FFD900;
        padding: 10px;
        margin: 50px;
    }

    before {
        float: left;
        width: 50%;
        height: 100%;
        shape-outside: radial-gradient(farthest-side ellipse at right, transparent 100%, red);
    }

    after {
        float: right;
        width: 50%;
        height: 100%;
        shape-outside: radial-gradient(farthest-side ellipse at left, transparent 100%, red);
    }

四：重點來了

如果對CSS Shapes布局還不太了解，可以自行百度查看一些資料 CSS Shapes(MDN),對於本文的demo，原理就是：

我們需要現在文字前面插入兩個元素，一個左浮動，一個右浮動，然后繪制內凹的徑向漸變。構建兩個弧形，然后使用CSS Shapes布局讓文字沿着這個弧形排列即可。

五：說明

CSS Shapes布局 IE瀏覽器，Edge瀏覽器都不支持。

Chrome瀏覽器下，這個左右浮動的CSS Shapes布局有個小問題，其實上面這個圖就有這個問題了，中間的文字莫名只顯示了左邊50%，右邊50%沒顯示。

Firefox瀏覽器沒有任何問題