是否只使用HTML和CSS創(chuàng)建一個圓形文本顯示？可以通過shape-outside屬性和一些巧妙的CSS技術(shù)來實現(xiàn)。但是，這種方法需要仔細(xì)考慮文本長度，字體選擇和響應(yīng)能力等因素。

這是一個目的：我們將在一個圓圈內(nèi)嵌入引用和作者歸因，以尋求靈活而乾淨(jìng)的解決方案。此方法避免了額外的文件並保持HTML簡潔。最終結(jié)果應(yīng)該類似於：

（注意：Internet Explorer或Microsoft Edge的舊版本不支持shape-outside 。）

HTML結(jié)構(gòu)

我們將使用一個<div>作為外套和語義<code><blockquote></blockquote>作為內(nèi)部容器：

<div class="quote-wrapper">
  <blockquote cite="http://www.inspireux.com/category/quotes/jesse-james-garrett/">
    <p class="text">經(jīng)驗設(shè)計是獨立於媒體或跨媒體的任何事物的設(shè)計，具有人類的經(jīng)驗是明確的結(jié)果，並且是人類參與作為明確的目標(biāo)。</p>
    <footer> - 傑西·詹姆斯·加勒特（Jesse James Garrett）</footer>
  </blockquote>
</div>

報價在<p>在類“文本”中，作者屬性在<code><footer></footer>。這些課程為CSS樣式提供了鉤子。

初始CSS樣式

讓我們從包裝紙開始：

 。
  身高：300px;
  位置：相對；
  寬度：300px;
}

這為響應(yīng)能力設(shè)定了最小尺寸，並為以後的調(diào)整建立了相對定位。

接下來，我們將使用徑向梯度創(chuàng)建圓形外觀：

 .文字 {
  背景：徑向梯度（
    橢圓形在中心，
    RGBA（0，128，172，1）0％，
    RGBA（0，128，172，1）70％，
    RGBA（0，128，172，0）70.3％
  ）；
  身高：100％；
  寬度：100％；
  顏色：白色；
  位置：相對；
  保證金：0;
}

注意：70.3％的值比簡單的70％提供了更光滑的邊緣。

文本樣式和形狀定義

讓我們樣式段落：

 .Text P {
  字體大?。?1px;
  字體風(fēng)格：斜體；
  身高：100％；
  線高：1.25;
  填充：0;
  文字平衡：中心；
  文本陰影：0.5px 0.5px 1PX RGBA（0，0，0，0，0.3）;
}

要塑造文本區(qū)域，我們將在偽元素和shape-outside屬性::before 。這涉及定義一個近似圓的多邊形：

 .text :: {
  內(nèi)容： ””;
  浮子：左；
  身高：100％；
  寬度：50％；
  形狀外面：多邊形（
    0 0，
    98％0，
    50％6％，
    23.4％17.3％，
    6％32.6％，
    0 50％，
    6％65.6％，
    23.4％82.7％，
    50％94％，
    98％100％，
    0 100％
  ）；
  形狀淨(jìng)值：7％；
}

類似的::before可以應(yīng)用於<p>元素創(chuàng)建圓的另一半。</p> <h3 id="頁腳樣式">頁腳樣式</h3> <p>為了正確定位作者歸因，我們將使用絕對定位：</p> <pre class="brush:php;toolbar:false"> 。 底部：25px; 字體大?。?7px; 字體風(fēng)格：斜體； 位置：絕對； 文字平衡：中心； 文本陰影：0.5px 0.5px 1PX RGBA（0，0，0，0，0.3）; 寬度：100％； }</pre> <p>可能需要對<code>font-size ， shape-margin ， line-height和其他屬性進(jìn)行微調(diào)以實現(xiàn)形狀內(nèi)的最佳文本擬合。

添加報價標(biāo)記

可以使用::before pseudo-element上的:: .quote-wrapper添加大號標(biāo)記：

 。引用wrapper :: {
  內(nèi)容：“ \ 201C”；
  顏色：#ccc;
  字體家庭：sans-serif，襯線；
  字體大小：270px;
  身高：82px;
  線高：1;
  不透明：.9;
  位置：絕對；
  頂部：-48px;
  左：0;
  z索引：1;
}

響應(yīng)式設(shè)計

媒體查詢可用於調(diào)整不同屏幕尺寸的大?。?/p>

 @Media（最小寬度：850px）{
  。
    身高：370px;
    寬度：370px;
  }
  / * ...大屏幕的其他調(diào)整... */
}

這種全面的方法允許僅使用HTML和CSS創(chuàng)建視覺上吸引人的循環(huán)文本顯示。請記住，根據(jù)您的特定文本和設(shè)計偏好可能需要進(jìn)行微調(diào)。