菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

W3.CSS 文本


文本对齐

w3-left-alignw3-right-align 类用于对齐文本。

左对齐文本。

右对齐文本。

示例

<div class="w3-container w3-border w3-large">
  <div class="w3-left-align"><p>左对齐文本。</p></div>
  <div class="w3-right-align"><p>右对齐文本。</p></div>
</div>
自己试试 »

居中元素

w3-center 类用于居中对齐元素

居中内容

car

一些居中文本。

示例

<div class="w3-container w3-center">
  <h2>居中内容</h2>
  <img src="img_car.jpg" alt="car" style="width:80%;max-width:320px">
  <p>一些居中文本。</p>
</div>
自己试试 »


宽文本

w3-wide 类指定更宽的文本

此文本是正常的。

此文本更宽。

示例

<p class="w3-wide">w3-wide 类指定更宽的文本。</p>
自己试试 »

文本透明度

w3-opacity 类旨在与所有颜色配合使用

文本透明度

文本透明度

文本透明度

文本透明度

示例

<div class="w3-panel w3-pink">
  <h2 class="w3-opacity">文本透明度</h2>
</div>
自己试试 »

文本阴影

CSS3 text-shadow 属性可用于为文本添加阴影或模糊效果

文本阴影


文本阴影


文本阴影


文本阴影

示例

<h2 class="w3-blue" style="text-shadow:1px 1px 0 #444">文本阴影</h2>
自己试试 »

特殊效果

文本透明度 + 加粗

黄色文本 + 阴影 + 加粗

橙色文本 + 阴影 + 加粗

示例

<div class="w3-panel w3-pink">
  <h1 class="w3-opacity">
  <b>文本透明度 + 加粗</b></h1>
</div>

<div class="w3-panel w3-amber">
  <h1 class="w3-text-yellow" style="text-shadow:1px 1px 0 #444">
  <b>黄色文本 + 阴影 + 加粗</b></h1>
</div>

<div class="w3-panel w3-blue">
  <h1 class="w3-text-orange" style="text-shadow:1px 1px 0 #444">
  <b>橙色文本 + 阴影 + 加粗</b></h1>
</div>
自己试试 »

文本阴影在 IE 9 及更早版本中无效。


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持