W3.CSS 標籤 (標識和標誌)
標籤: 完成 最新！ 稍後更新！
標籤作為標誌: Falcon Ridge Parkway 停止！ 小心！
W3.CSS 標籤類
W3.CSS 提供一個類用於標籤、標識和標誌
| 類 | 定義 |
|---|---|
| w3-tag | 矩形黑色標籤/標識 |
標籤、標識和標誌
在 W3.CSS 的世界裡，標籤、標識或標誌之間沒有真正的區別。
標籤是矩形的
w3-tag 類建立了一個矩形標籤（標識或標誌）。預設顏色為黑色。
狀態: 完成
彩色標籤
使用 w3-color 類來改變標籤的顏色：
最新！
稍後更新！
示例
<p><span class="w3-tag w3-blue">最新！</span></p>
<p><span class="w3-tag w3-teal">稍後更新！</span></p>
自己試試 »
標籤尺寸
預設情況下，標籤會繼承其容器的尺寸。
w3-size 類（w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo）可用於修改標籤的尺寸。
6 6 6
66 66 66
66 66
對於大尺寸的標籤，您可能需要新增一些額外的內邊距。
示例
<span class="w3-tag w3-jumbo w3-blue">66</span>
<span class="w3-tag w3-jumbo w3-blue w3-padding-large">66</span>
自己試試 »
字母標籤
A U G U S T
示例
<span class="w3-tag w3-xlarge">A</span>
<span class="w3-tag w3-xlarge">U</span>
<span class="w3-tag w3-xlarge">G</span>
<span class="w3-tag w3-xlarge">U</span>
<span class="w3-tag w3-xlarge">S</span>
<span class="w3-tag w3-xlarge">T</span>
自己試試 »
示例
<span class="w3-tag w3-jumbo w3-red">S</span>
<span class="w3-tag w3-jumbo">A</span>
<span class="w3-tag w3-jumbo w3-yellow">L</span>
<span class="w3-tag w3-jumbo">E</span>
自己試試 »
標誌
標誌只是大尺寸的標籤。
倫敦動物園
道路標誌
Falcon Ridge Parkway
示例
<div class="w3-tag w3-round w3-green" style="padding:3px">
<div class="w3-tag w3-round w3-green w3-border w3-border-white">
Falcon Ridge Parkway
</div>
</div>
自己試試 »
大型標誌
w3-size 類可用於顯示大型標誌。
萬一緊急情況
像瘋了一樣跑！
示例
<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
<strong>
萬一<br>
緊急情況:<br>
像瘋了一樣跑！
</strong>
</span>
自己試試 »
49,99
圓角標誌
w3-round-size 類可用於為標誌新增圓角。
請勿呼吸
在水下
旋轉標籤
使用標準的 CSS transform 屬性來旋轉標誌。
停止示例
<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
停止
</span>
自己試試 »
注意: transform:rotate() 在 IE 9 及更早版本中不起作用。
旋轉標籤
w3-spin 類可用於讓標誌旋轉 360 度。
停止
