Question

我想将内部border-radius，（不是外部border-radius）设置为我的div而没有嵌套div的像这样：
enter image description here 我的html源代码 jsfiddle

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #s{
        width:200px;
        height: 200px;
        border:8px solid green ;
        border-radius:8px;
        background-color: red;
        margin:0 auto;
    }
    </style>
</head>
<body>
    <div id="s" >

    </div>
</body>
</html>

这个想法在css3中是否可能？

Answer 1

你可以，但我认为它不可用，因为有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;
}

Demo

Answer 2

可以使用outline和box-shadow等额外属性伪造此内容。

<强> CODEPEN DEMO

<强> CSS

#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;
}

NB。 outline本身会留下圆角的间隙。 box-shadow只是填补了空白。

没有嵌套div的css内边框半径

2 个答案: