css固定图片位置不变

在CSS样式中，我们可以用四边切角（border-radius）来实现元素的圆角效果。通常，圆角样式可以被用在按钮、弹窗、表格等众多的地方。下面是一个圆形头像的例子：

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 或者用50px来指定 */
}

如果想要创建不同程度的圆角，我们可以将四边切角属性拆成四个单独的属性定义。

.border {
  border-top-left-radius: 5px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 30px;
}

这个例子中，我们将每个角的圆角度数都定义成了不同的值。如果我们想要更方便地定义圆角，我们也可以使用后代选择器。

.rounded {
  border-radius: 5px;
}
.rounded p {
  border-radius: 10px;
}
.rounded p span {
  border-radius: 20px;
}

在这种情况下，“.rounded”类将被应用于所有的子元素，而且可以通过更进一步的选择器来定义不同程度的圆角。

最后需要注意的是，给四边切角属性设置过大的值可能会导致圆角的形状发生奇怪的变化。在这种情况下，我们需要调整其他属性（例如宽度或高度），以保证圆角仍然保持准确的形状。