W3.CSS Texts (文本)

2020-11-30 13:56 更新

文本對齊

w3-left-align 和 w3-right-align 類用于對齊文本。

實例

<div class="w3-container w3-border w3-large">

  <div class="w3-left-align"><p>左對齊文本。</p></div>

  <div class="w3-right-align"><p>右對齊文本。</p></div>

</div>


嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

居中元素

w3-center 類用于中心對齊元素:

實例

<div class="w3-container w3-center">

  <h2>中心內(nèi)容</h2>

  <img src="img_car.jpg" alt="car" style="width:80%;max-width:320px">

  <p>一些居中的文本。</p>

</div>


嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

寬文本

w3-wide 類指定一個更寬的文本:

此文字是正常的。

此 文 本 內(nèi) 容 更 寬。

實例

<p class="w3-wide">w3-wide 指定更寬的文本。</p>


嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

文本不透明度

w3-opacity 類旨在與顏色協(xié)同調(diào)色:

實例

<div class="w3-panel w3-pink">

  <h2 class="w3-opacity">文本不透明度</h2>

</div>


嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

文本陰影

CSS3 文本陰影屬性可用于向文本添加陰影或模糊效果:

實例

<h2 class="w3-blue" style="text-shadow:1px 1px 0 #444">文本陰影</h2>


嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

文本特效

實例

<div class="w3-panel w3-pink">

  <h1 class="w3-opacity">

  <b>文本不透明度 + 粗體</b></h1>

</div>

<div class="w3-panel w3-amber">

  <h1 class="w3-text-yellow" style="text-shadow:1px 1px 0 #444">

  <b>黃色文本 + 陰影 + 粗體</b></h1>

</div>

<div class="w3-panel w3-blue">

  <h1 class="w3-text-orange" style="text-shadow:1px 1px 0 #444">

  <b>橙色文本 + 陰影 + 粗體</b></h1>

</div>


嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

Text Shadow 在 IE 9 及更低版本中不起作用。


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號