W3.CSS 警报

---

w3-panel 类是显示所有类型警报的类:

显示危险信息

×

危险！

红色通常表示危险或消极的情况。

警报通常使用强烈的颜色显示:

×

危险！

红色通常表示危险或消极的情况。

实例

<div class="w3-panel w3-red">
  <h3>危险!</h3>
  <p>红色通常表示危险或消极的情况。</p>
</div>  亲自试一试 »

---

显示警告信息

×

警告！

黄色通常表示可能需要注意的警告。

×

警告！

黄色通常表示可能需要注意的警告。

实例

<div class="w3-panel w3-yellow">
  <h3>Warning!</h3>
  <p>黄色通常表示可能需要注意的警告。</p>
</div>  亲自试一试 »

---

显示成功

×

成功!

绿色通常表示成功或积极的事情。

×

成功!

绿色通常表示成功或积极的事情。

实例

<div class="w3-panel w3-green">
  <h3>Success!</h3>
  <p>绿色通常表示成功或积极的事情。</p>
</div>  亲自试一试 »

---

显示信息

×

信息!

蓝色通常表示中性信息更改或操作。

×

信息!

蓝色通常表示中性信息更改或操作。

实例

<div class="w3-panel w3-blue">
  <h3>Information!</h3>
  <p>蓝色通常表示中性信息更改或操作。</p>
</div>  亲自试一试 »

---

使用容器

w3-container 类也可用于显示警报:

实例

<div class="w3-container w3-red">
  <h3>危险!</h3>
  <p>红色通常表示危险或消极的情况。</p>
</div>  亲自试一试 »

---

各种颜色的警报

警报通常以特殊颜色显示，但可以使用任何颜色:

危险！

红色通常表示危险或消极的情况。

危险！

红色通常表示危险或消极的情况。

危险！

红色通常表示危险或消极的情况。

危险！

红色通常表示危险或消极的情况。

危险！

红色通常表示危险或消极的情况。

实例

<div class="w3-panel w3-blue-grey">
  <h3>危险!</h3>
  <p>红色通常表示危险或消极的情况。</p>
</div>  亲自试一试 »

---

关闭警报

要关闭警告框，请单击右上角的 X:

×

危险！

红色通常表示危险或消极的情况。

要创建关闭警报的 X，添加一个类为 w3-button 的 <span> 元素和一个 onclick 事件:

实例

<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-topright">&times;</span> 亲自试一试 »

提示: HTML &times; 实体是关闭按钮的首选图标（而不是字母"X"）。

---

圆角警报

如果您想要圆角，请使用 w3-round 类:

成功！

这里使用了 w3-round。

成功！

这里使用了 w3-round-large。

成功！

这里使用了 w3-round-xxlarge。

实例

<div class="w3-panel w3-green w3-round"> 亲自试一试 »

---

作为卡片的警报

如果您希望警报显示为卡片，请使用 w3-card 类:

警告！

黄色通常表示需要注意的事情。

实例

<div class="w3-panel w3-yellow w3-card-4"> 亲自试一试 »