W3.CSS 文字
文字對齊
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>居中內容</h2>
<img src="img_car.jpg" alt="car" style="width:80%;max-width:320px">
<p>一些居中文字。</p>
</div>
自己試試 »
寬文字
w3-wide 類指定更寬的文字
此文字是正常的。
此文字更寬。
文字透明度
w3-opacity 類旨在與所有顏色配合使用
文字透明度
文字透明度
文字透明度
文字透明度
文字陰影
CSS3 text-shadow 屬性可用於為文字新增陰影或模糊效果
文字陰影
文字陰影
文字陰影
文字陰影
特殊效果
文字透明度 + 加粗
黃色文字 + 陰影 + 加粗
橙色文字 + 陰影 + 加粗
示例
<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>
自己試試 »
文字陰影在 IE 9 及更早版本中無效。
