免费AI编程助手
W3.CSS Tags (标签)
W3.CSS为标签提供了一类：
| 类 | 定义 |
|---|---|
| w3标签 | 矩形黑色标签/标签 |
提示： 在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）可以被用来修改标签的尺寸。
您可能要为大型标签添加一些额外的填充：
实例
<span class="w3-tag w3-jumbo w3-blue">66</span>
<span class="w3-tag w3-jumbo w3-blue w3-padding-large">66</span>
尝试一下 »
点击“尝试一下”按钮查看在线实例
字母标签
实例
<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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
标志
标志不过是大标签。
路标
实例
<div class="w3-tag w3-round w3-green" style="padding:3px">
<div class="w3-tag w3-round w3-green w3-border w3-border-white">
猎鹰岭公园路
</div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
显著的标志
w3-size 类可以用来显示显著的标志：实例
<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
<strong>
万一发生<br>
紧急情况:<br>
请拼命跑!
</strong>
</span>
尝试一下 »
点击“尝试一下”按钮查看在线实例
实例
<span class="w3-tag w3-jumbo w3-green">
49<span class="w3-xlarge">,99</span>
</span>
尝试一下 »
点击“尝试一下”按钮查看在线实例
圆角标志
w3-round-size 类可用于将圆角添加到标志中：
实例
<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
不要<br>
在水下<br>
呼吸
</span>
尝试一下 »
点击“尝试一下”按钮查看在线实例
指定标签角度
使用标准CSS变换属性来指定标签角度：
实例
<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-10deg)">
停
</span>
尝试一下 »
点击“尝试一下”按钮查看在线实例
提示： transform：rotate（）在IE 9及更低版本中不起作用。
旋转标签
w3-spin 类可以用来让一个符号360度旋转：
更多建议：