W3.CSS 标记（标签和标志）
标签: Done New! More Later!
标记为符号: Falcon Ridge Parkway STOP! WATCH OUT!
W3.CSS 标签类
W3.CSS 为标记、标签和标志提供了一个类:
| 类 | 定义 |
|---|---|
| w3-tag | 黑色矩形 tag/label |
标记、标签和标志
在 W3.CSS 世界中，标记、标签或标志之间没有真正的区别。
标签是矩形的
w3-tag 类创建一个矩形标签（标签或标志）。 默认颜色为黑色:
状态: Done
彩色标签
使用 w3-color 类来改变标签的颜色:
New!
More Later!
实例
<p><span class="w3-tag w3-blue">New!</span></p>
<p><span
class="w3-tag w3-teal">More Later!</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>
亲自试一试 »
标志
标志只不过是大标签。
London Zoo
路标
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 类可用于显示大标志:
IN CASE OFEMERGENCY:
RUN LIKE HELL!
实例
<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
<strong>
IN CASE OF<br>
EMERGENCY:<br>
RUN LIKE HELL!
</strong>
</span>
亲自试一试 »
49,99
圆形标志
w3-round-size 类可用于为标志添加圆角:
DO NOTBREATHE
UNDER WATER
实例
<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>
亲自试一试 »
旋转标签
使用标准的 CSS transform 属性来旋转标志:
STOP实例
<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
STOP
</span>
亲自试一试 »
注释: transform:rotate() 在 IE 9 及更早版本中不起作用。
旋转标签
w3-spin 类可用于让标志旋转 360 度:
STOP
