css如何做圆角框

在网页设计中，我们经常会需要使用圆角框来增添设计感。使用CSS可以轻松地实现圆角框样式。下面介绍三种实现圆角框的CSS方法。 第一种方法是使用border-radius属性。该属性有四个值，分别对应四个角。例如：

p {
  border: 2px solid #000;
  border-radius: 10px;
}

上述代码会为段落文字添加一个边框，并将边框四个角都设置为圆角，半径为10px。使用该属性可实现圆角框效果； 第二种方法是使用border-image属性。该属性可以在边框的范围内使用图片、渐变等做背景。例如：

p {
  border: 20px solid transparent;
  border-image: url(image.png) 30 round;
}

上述代码会为段落添加一个20px的边框，将其背景填充为透明，并使用名称为“image.png”的图片作为边框的背景，边框的宽度为30，圆角半径为默认值round，即自适应30； 第三种方法是使用Box-shadow属性。该属性可以模拟出一个圆角框的效果。例如：

p {
  Box-shadow: 0 0 0 10px #000;
}

上述代码会为段落添加一个透明的阴影，半径为10px。使用该属性即可实现圆角框效果。 总结起来，使用border-radius、border-image、Box-shadow这三个属性，我们可以轻松地实现各种形状、尺寸的圆角框效果。