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 度
停车
