使用CSS將文本設置在圓圈內

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

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

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

HTML結構

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

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

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

初始CSS樣式

讓我們從包裝紙開始：

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

這為響應能力設定了最小尺寸，並為以後的調整建立了相對定位。

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

 .文字 {
  背景：徑向梯度（
    橢圓形在中心，
    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 {
  字體大小：21px;
  字體風格：斜體；
  身高：100％；
  線高：1.25;
  填充：0;
  文字平衡：中心；
  文本陰影：0.5px 0.5px 1PX RGBA（0，0，0，0，0.3）;
}

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

 .text :: {
  內容： ””;
  浮子：左；
  身高：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％
  ）；
  形狀淨值：7％；
}

類似的::before可以應用於<p>元素創建圓的另一半。</p> <h3 id="頁腳樣式">頁腳樣式</h3> <p>為了正確定位作者歸因，我們將使用絕對定位：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> 。 底部：25px; 字體大小：17px; 字體風格：斜體； 位置：絕對； 文字平衡：中心； 文本陰影：0.5px 0.5px 1PX RGBA（0，0，0，0，0.3）; 寬度：100％； }</pre><div class="contentsignin">登入後複製</div></div> <p>可能需要對<code>font-size ， shape-margin ， line-height和其他屬性進行微調以實現形狀內的最佳文本擬合。

添加報價標記

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

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

響應式設計

媒體查詢可用於調整不同屏幕尺寸的大小：

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

這種全面的方法允許僅使用HTML和CSS創建視覺上吸引人的循環文本顯示。請記住，根據您的特定文本和設計偏好可能需要進行微調。

以上是使用CSS將文本設置在圓圈內的詳細內容。更多資訊請關注PHP中文網其他相關文章！