每天一个css效果之边框内边圆角的实现

要求：

使用一个容器，实现内侧有圆角，而边框或者描边的四个角在外部依旧是垂直的边角，具体效果如下图所示：

微信图片_20191018144836.png

注意点：
使用一个元素实现

代码实现：
css代码部分
div{
    outline: .6em solid #655;
    box-shadow: 0 0 0 .4em #655;
    max-width: 10em;
    border-radius: .8em;
    padding: 1em;
    margin: 10em;
    background: tan;
    text-align:center;
}

知识点：

• outline: 描边不会跟随border-radius设置的圆角走
• box-shadow : 描边跟随border-radius设置的圆角走 也会转为圆角