[分享]css中如何画个圆角

CSS中如何画一个圆角呢？我们可以使用border-radius属性。

/* 代码示例 */
<style>
  .circle {
    width: 100px; /* 圆的直径 */
    height: 100px;
    border-radius: 50%; /* 圆角的大小为宽度的50% */
    background-color: pink; /* 填充颜色 */
  }
</style>

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

上面的代码演示了一个宽度和高度都为100px的圆。border-radius属性指定了圆角的大小，这里是宽度的50%，也就是让圆角占据了整个圆的一半大小。

如果我们想要指定一个矩形的某一个角为圆角，可以使用border-top-left-radius、 border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius四个属性。比如我们可以使用border-top-left-radius将左上角变为圆角：

/* 代码示例 */
<style>
  .rectangle {
    width: 200px;
    height: 100px;
    border-top-left-radius: 20px; /* 左上角圆角为20px */
    background-color: green;
  }
</style>

<div class="rectangle"></div> 

上面的代码演示了一个宽度为200px，高度为100px的矩形，左上角的圆角大小为20px。

border-radius属性还可以指定多个值来生成椭圆形的圆角。比如我们可以使用border-radius: 50% 30%;表示一个水平方向上的圆角大小是宽度的50%，垂直方向上的圆角大小是高度的30%。

综上所述，border-radius属性可以帮助我们在CSS中轻松地画出各种形状的圆角。