语义UI | 形状

语义UI指的是在设计和开发过程中，注重语义化和可访问性的用户界面设计方法。而形状则是指界面元素的外形。在语义UI中，形状不仅仅是为了美观，更是为了传达信息以及提高可访问性。

圆角

圆角是一种常见的形状，可以用于按钮、输入框、卡片等各种组件中。圆角可以起到缓解尖锐的感觉、提高用户对组件的可点击性以及提高组件的美观性的作用。

按钮组件示例：
<button class="button button-rounded">按钮</button>

输入框组件示例：
<input class="input input-rounded" type="text" placeholder="请输入内容">

卡片组件示例：
<div class="card card-rounded">这是一张卡片</div>

直角

和圆角相反，直角在一些设计中更为常见，比如表格、窗口、面板等等。直角可以加强组件的感性，使组件更加坚固，也更加利于板块化的布局呈现。

表格组件示例：
<table class="table table-rectangle">
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

窗口组件示例：
<div class="window window-rectangle">这是一个窗口组件</div>

面板组件示例：
<div class="panel panel-rectangle">这是一个面板组件</div>

波浪形

波浪形可以运用在背景、边框等多个地方。在一些特殊的设计中，波浪形可以起到增加视觉趣味性的作用，减轻刚性的印象，从而缓解压力。同时波浪形要符合主题的视觉样式，不宜过度笔直或曲折，否则反而会显得不合适。

背景波浪形示例：
<div class="background-wave"></div>

边框波浪形示例：
<div class="border-wave">这是有波浪边框的组件</div>

圆形

圆形形状常常用于头像、徽章等组件中。圆形的外形流畅，符合人们认为强调和美观的审美标准。同时，与方形和矩形相比，圆形少了那些硬边和棱角，更加柔和和渐变，易于融入一些柔和的设计语言中。

头像组件示例：
<img src="https://example.com/images/avatar.jpg" class="avatar">

徽章组件示例：
<div class="badge badge-circle">1</div>

总之，形状作为语义UI中不可忽视的一部分，对于进行设计和开发的程序员来说，掌握合理运用形状的方法，能够增强UI的表现力和品味，建立合适的视觉风格。