css上下长方形 左右圆形

CSS可以让我们轻松实现上下长方形、左右圆形的效果。下面我们来了解一下吧。

 /* 上下长方形 */
  .rectangle {
    width: 100px;
    height: 200px;
    background-color: #f00;
  }
  /* 左右圆形 */
  .circle {
    width: 200px;
    height: 100px;
    border-radius: 100px;
    background-color: #00f;
  } 

首先是实现上下长方形，我们只需要定义一个宽度和高度不一样的盒子，并设置背景色即可。比如上面的代码中，我们定义了一个宽度为100px，高度为200px，背景颜色为红色的盒子。这个盒子的形状就是上下长方形。

其次是实现左右圆形，我们需要借助border-radius属性。这个属性可以将一个盒子设置成圆形或者椭圆形，具体效果取决于半径值的大小。比如上面的代码中，我们定义了一个宽度为200px，高度为100px，圆角半径为100px，背景颜色为蓝色的盒子。这个盒子的形状就是左右圆形。

通过CSS的样式定义，我们可以轻松实现各种形状的盒子效果。希望对大家有所帮助。