现在我们要实现一个边框内圆角的效果,效果图如下所示:
第一反应肯定是用两个标签来实现,但是如果只用一层标签的话,可以实现么
我们首次的构想可能是这样子的
div {
outline: .6em solid green;
max-width: 10em;
border-radius: .8em;
padding: 1em;
margin: 1em;
background: red;
font: 100%/1.5 sans-serif;
}
然后运行一看效果是这样的:
因为outline不跟着描边border-radius走的,所以能够实现直角效果,但是显示还缺少点什么才能让白色圆角突兀效果去掉
这里需要明白两点:
1、box-shadow可以跟着描边效果走
2、box-shadow扩展半径公式为
所以最终我们的代码是:
div {
outline: .6em solid green;
box-shadow: 0 0 0 .4em green;
/* todo calculate max of this */
max-width: 10em;
border-radius: .8em;
padding: 1em;
margin: 1em;
background: red;
font: 100%/1.5 sans-serif;
}
具体效果见链接
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。