css 中的边框半径内圆角，没有嵌套 div
我想在没有嵌套 div 的情况下为我的元素设置圆角内部边框border-radius（而不是外部）。border-radius
我的想法是这样的图：
jsfiddle上的 html 源
<!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中可能吗？
你可以，但我认为它不会可用，因为一旦有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;
}