CSS 半径背景颜色

在CSS中，我们可以使用边框半径属性来创建圆形或者椭圆形的形状。这个属性通常用在元素的边框上，但也可以用在背景上。使用这个属性可以让背景颜色变成圆形或者椭圆形，从而创建出独特的设计效果。

语法

border-radius属性可以接受一个或多个值，每个值表示一个角的圆角弧度。如果只提供一个值，则所有角都使用这个值。如果提供两个值，则第一个值表示左上和右下角的圆角弧度，第二个值表示右上和左下角的圆角弧度。如果提供四个值，则依次表示左上、右上、右下、左下四个角的圆角弧度。

background: 这里填写背景颜色;
border-radius: 值;

示例

以下是一个示例，展示如何使用 border-radius 属性来圆弧一个背景颜色。

div {
  background: #ffcc00;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

这会创建一个黄色圆形，直径为200px。 border-radius 属性设置为50%，使角变为圆形。

使用技巧

• 在使用 border-radius 属性时，更小的值会产生更小的弧度，也就是说，圆形的弧度约接近0。
• 使用 border-radius 属性还可以创建出不同形状的角，例如椭圆形和不规则形状。
• 可以透过叠合多个元素实现不同颜色的背景圆角。

结论

border-radius 属性为我们提供了一个简单、易于使用的方法，通过控制弧度大小，把不同的角设为圆形、椭圆形，从而使设计变得更加丰富。