HTML+css盒子模型案例(圆，半圆等)“border-radius” 简单易上手

HTML+CSS盒模型是网页设计中非常重要的一个概念，了解盒模型对于网页布局和样式的掌控有着十分关键的作用。其中“border-radius”属性是用于创建各种圆角的CSS属性。下面将在这个主题下，提供一个简单的上手攻略，来实现几个有趣的案例。

HTML+CSS 圆形盒子

实现一个简单的圆形盒子非常简单，我们只需要在CSS代码中添加“border-radius: 50%”即可。

.circle {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  border-radius: 50%;
}

这个代码会创建一个宽高都是200像素的圆形盒子，背景颜色为灰色。我们通过“border-radius”将边框的四个角圆滑化为半径100像素的圆形角。展示的效果如下：

<div class="circle"></div>

HTML+CSS 半圆形盒子

实现一个半圆形盒子也非常容易。只需将圆形盒模型的高度改为原来的一半，同时将“border-radius”的值设置为“50% 50% 0 0”，即可将底部的两个角变成平滑的边缘，最终实现一个半圆形盒子。

.half-circle {
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  border-radius: 50% 50% 0 0;
}

这个代码会创建一个宽度为200像素、高度为100像素、背景为灰色的半圆形盒子。展示的效果如下：

<div class="half-circle"></div>

以上是实现HTML+CSS盒子模型案例（圆，半圆等）的两个简单示例。通过这些示例，可以快速了解盒子模型一些常见的用法，并且基础的“border-radius”属性也能得到比较好的应用。