Html css中的圆角内边框半径，无嵌套div

我想为没有嵌套div的元素设置圆角内边框半径，而不是外边框半径

我的想法是这样的：

上的html源代码

---

这在css3中是可能的吗？

您可以，但我认为它不可用，因为有z-index:-1；一旦有了另一个背景，它就会走到后面

#s {
    position: relative;
    width:200px;
    height: 200px;
    border-radius:8px;
    background-color: red;
    margin:0 auto;
}
#s:before {
    content:'';
    z-index: -1;
    background-color: green;
    position: absolute;
    top: -8px;
    left: -8px;
    width: 216px;
    height: 216px;
}

---

你可以，但我想它不会有用，因为有z-指数：-1；一旦有了另一个背景，它就会走到后面

#s {
    position: relative;
    width:200px;
    height: 200px;
    border-radius:8px;
    background-color: red;
    margin:0 auto;
}
#s:before {
    content:'';
    z-index: -1;
    background-color: green;
    position: absolute;
    top: -8px;
    left: -8px;
    width: 216px;
    height: 216px;
}

---

可以用两个额外的属性，即outline和box shadow来伪装这一点

CSS

---

注意。轮廓本身将在圆角处留下间隙。长方体阴影只是填补了空白。

可以用两个额外的属性，即轮廓和长方体阴影来伪装这一点

CSS

---

注意。轮廓本身将在圆角处留下间隙。框阴影只是填补了空白。

在我的应用程序中不可能！！！这在我的申请上是不可能的！！！比我的更好的解决方案+1.非常感谢……我花了一两分钟的时间比我的更好的解决方案+1.非常感谢……我花了一两分钟的时间

#s{
  width:200px;
  height: 200px;
  border-radius:8px;
  background-color: red;
  margin:0 auto;
  outline:8px solid green;
  -webkit-box-shadow:0 0 0 8px green;
}