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 度。
停止
