[分享]css内圆觉角和外圆角

在CSS中，圆角是一项常用的样式技术。通过为盒子添加边框半径，可以将其角落变为圆角，从而打造出更加柔和的外观。CSS支持两种类型的圆角：内圆角和外圆角。内圆角是指将边框半径应用到盒子的内部，这使得内容...

在CSS中，圆角是一项常用的样式技术。通过为盒子添加边框半径，可以将其角落变为圆角，从而打造出更加柔和的外观。CSS支持两种类型的圆角：内圆角和外圆角。

内圆角是指将边框半径应用到盒子的内部，这使得内容与边框产生重叠，从而创造出圆角的效果。以下是示例代码：

div {
  border: 2px solid #333;
  padding: 20px;
  border-radius: 10px;
} 

这段代码应用的是一个内圆角。它首先创建了一个2像素的黑色边框，并为盒子内部设置了20像素的内边距。然后，通过设置边框半径为10像素，将边框半径应用到盒子内部。这样，边框和内容就彼此重叠了，并打造出了漂亮的圆角效果。

外圆角，又称为平滑圆角（border-radius:50%），是指将边框半径应用到盒子的外部。这使得边框半径向外膨胀，从而打造出更加明显的圆角效果。以下是示例代码：

div {
  border: 2px solid #333;
  padding: 20px;
  overflow: hidden;
}

div img {
  width: 100%;
  height: auto;
  border-radius: 50%;
} 

这段代码应用了一个外圆角，完美地展示了如何使用这种技术。它首先创建了一个2像素的黑色边框，并为盒子内部设置了20像素的内边距。然后，为了使图片超出盒子范围时不会溢出，我们将外部溢出隐藏，并为图片设置了50%的边框半径。这使得图片变圆，并从外部实现了圆角效果。

总的来说，内圆角是一种非常实用的技术，这种技术使得边框和内容连为一体，在视觉上能够让盒子看起来更加整洁。而外圆角则是一种非常独特的技术，它可以让盒子更具个性化，打造出一些独特的外观效果。