[分享]css写一个半圆角

CSS是文档样式语言，它可以帮助我们实现各种各样的样式效果，其中半圆角就是一种实现样式之一。下面我们来看看如何使用CSS来实现半圆角的效果。 /HTML/ /CSS/ .box { width: 1...

CSS是文档样式语言，它可以帮助我们实现各种各样的样式效果，其中半圆角就是一种实现样式之一。下面我们来看看如何使用CSS来实现半圆角的效果。

 /*HTML*/
  <div class="box"></div>

  /*CSS*/
  .box {
    width: 100px;
    height: 100px;
    background-color: #ccc;
    border-radius: 50px 50px 0 0;
  } 

在上面的代码中，我们创建了一个宽高都为100px的的div元素，并设置了背景颜色为灰色。接着，我们使用“border-radius”属性来设置元素的边框半径，其中“50px 50px 0 0”代表左上、右上角的半径为50px，左下、右下角的半径为0，即不弯曲处理，从而实现了半圆角效果。

需要注意的是，边框半径的值不能大于元素的宽或高的一半，否则我们看不到半圆角的效果。通过这种方式，我们可以通过CSS实现各种不同形状的元素，让我们的网页更加美观和丰富。