CSS内边框半径

Question

我需要对组件应用内边框半径而不是外半径。我有一个普通的 div 并对其应用了一些样式：

.border {
  width: 350px;
  height: 200px;
  border: 50px solid grey;
  border-radius: 8px;
  background-color: #f3f3f3;
}

这里

border-radius

属性没有执行我期望的操作，因为如果边框不是其内部部分，它将样式应用到外部。有没有办法使用纯 css 来做到这一点，而不添加任何更多的 html 元素？

这是一个代码笔：Codepen

Answer 1

这个怎么样？

您可以使用伪元素

::after

（或

::before

）并按照您的方式设置样式 想要它，然后使用位置

.border

将其放置在您的

absolute

div 顶部。

我给了它你想要的圆形边框，然后将它放在中间，在你的

.boder

div 顶部，现在看起来

.border

的内角是圆形的

.border {
  width: 350px;
  height: 200px;
  border: 50px solid grey;
  background-color: white;
  position: relative;
}

.border::after {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  background-color: #f3f3f3;
  border-radius: 50px;
  height: 240px;
  width: 390px;
}

<div class="border"></div>

Answer 2

我不知道纯 CSS 解决方案，但是使用额外的内部 div 你可以这样做：

.border {
  width: 350px;
  height: 200px;
  border: 50px solid grey;
  background-color: #f3f3f3;
}

.outer {
  border-radius: 100px;
}

.inner {
  position: relative;
  top: -50px;
  left: -50px;
  z-index: -1;
}

<div class="border outer">
  <div class="border inner"></div>
</div>

Answer 3

使用

oultine

属性作为边框，通过

::after

，您可以为

.border

类提供带有

border-radius

的背景，可以将其放置在与

.border

重叠的位置，从而提供内部边框半径外观。

使用

z-index

属性

-1

以便

.border

的内容不会隐藏在背景后面。

.border {
  width: 350px;
  height: 200px;
  outline: 40px solid grey;
  margin: 40px;
  background-color: grey;
  position: relative;
  padding: 10px;
  z-index: 1;
}

.border::after {
  content: "";
  position: absolute;
  background-color: red;
  border-radius: 18px;
  width: 350px;
  height: 200px;
  left: 0px;
  top: 0px;
  z-index: -1;
}

<div class="border">ddsdggw
</div>

Answer 4

这个怎么样？我使用另一个 div 来实现内边框。您可以享受此代码。

.outer_box {
  display: flex;
  width: 350px;
  height: 200px;
  border: 50px solid grey;
  border-radius: 8px;
  background-color: grey;
}

.inner_box {
  width: 330px;
  height: 180px;
  margin: auto auto;
  border: 8px solid white;
  border-radius: 10px;
  background-color: white;
}

<div class="outer_box">
  <div class="inner_box"></div>
</div>

Answer 5

CSS 中没有直接选项来应用内边框，但您可以创建一个使用径向渐变来模拟效果的伪元素。通过将渐变定位在角落，它会产生内部边框与外部边框具有相同圆形形状的错觉。这种方法有效地模仿了您正在寻找的内部边框，而无需添加额外的 HTML 元素。

.box-wrap {
  width: 400px;
  height: 400px;
  background: blue;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  border-radius: 20px;
}

.box {
  background: red;
  width: 200px;
  height: 200px;
  position: relative;
  border-radius: 0px 20px 0px 20px;
}

.box::before {
  position: absolute;
  content: '';
  width: 30px;
  height: 30px;
  background-image: radial-gradient(circle at 100% 100%, transparent 30px, red calc(20px + 1px));
  top: -30px;
  left: 0;
  display: block;
  z-index: 1;
  transform: rotate(270deg)
}
  .box::after {
  position: absolute;
  content: '';
  width: 30px;
  height: 30px;
  background-image: radial-gradient(circle at 100% 100%, transparent 30px, red calc(20px + 1px));
  bottom: 0px;
  right: -30px;
  display: block;
  z-index: 1;
  transform: rotate(270deg)
}

<div class="box-wrap">
  <div class="box"></div>
</div>