css border-radius 如何设置不占div宽度,向外突出

在CSS中，border-radius 用于创建元素的圆角边框，但边框圆角本身是包含在元素的总宽度和高度内的，并不会额外占用外部空间或使元素尺寸变大。如果你想让圆角“向外突出”，即不占用div本身的宽度和高度，可以通过一些技巧来模拟这种效果。

一种常见的方法是使用伪元素 (::before 和 ::after) 来创建额外的层，这些层具有透明的背景和颜色，以及较大的圆角，从而营造出边框圆角向外扩展的视觉效果。下面是一个简单的示例：

div {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #f0f0f0; /* div 的背景色 */
}

/* 创建向外突出的圆角效果 */
div::before {
  content: "";
  position: absolute;
  top: -10px; /* 负值使伪元素向上偏移，以创建上部的外凸圆角 */
  left: -10px; /* 负值使伪元素向左偏移，以创建左侧的外凸圆角 */
  right: -10px; /* 同理，右侧 */
  bottom: -10px; /* 底部 */
  background-color: transparent; /* 或与父元素相同的背景色，以保持透视感 */
  border-radius: 20px; /* 设置你想要的圆角大小 */
  z-index: -1; /* 确保伪元素在div的下方 */
}

在这个例子中，我们通过负的边距(margin)使伪元素超出了div的边界，并且给予了透明的背景色，这样圆角就仿佛是从div的边缘向外扩展出去的。
记得调整top, right, bottom, left以及border-radius的具体数值来达到你想要的效果。

请注意，这种方法可能会对页面布局产生影响，尤其是当元素之间间距紧密或者有其他定位元素时，需要仔细调整以避免重叠或布局错乱。

__EOF__

本文作者：龙陌
本文链接：https://www.cnblogs.com/longmo666/p/18183799.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！