我想标题有点难以理解,所以我会解释.我想要达到这个效果:

(一个圆角及其边框,也有圆角边框).
我通过使用background-clip属性设法做到了这一点:

(圆角为边框,但不是内框)
问题是,我怎样才能实现内盒的圆角?
谢谢!
编辑
我正在使用的HTML:
<header class="body template-bg template-border radius-all">
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</nav>
</header>
Run Code Online (Sandbox Code Playgroud)
而CSS:
.radius-all {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.template-bg {
background: #FFF;
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
}
.template-border {
border: 5px solid rgba(255, 255, 255, 0.2);
}
Run Code Online (Sandbox Code Playgroud)