css实现边框内圆角

css实现边框内圆角

有时我们需要一个容器,只有在内侧有圆角,而边框或四个角在外依然保持直角的形状,我们可以用两个div元素来实现这种效果,具体如下:
html代码

 <div class="container">
        <div>
            接天莲叶无穷碧
            映日荷花别样红
        </div>
    </div>

css部分代码如下:

.container {
    width: 150px;
    padding:.8em;
    margin:50px auto;
    background-color: #655;
      }
.container > div {
   background: tan;
   border-radius: .8em;
   padding:1em;
   color:white;
}

效果如下图所示:

这种方法虽然实现了我们想要的效果,但它需要两个元素,那我们是否可以只用一个元素来实现相同的效果呢?
当然也是可以的,我们需要运用到box-shadow属性和outline属性,css代码如下:

background: tan;
border-radius: .8em;
padding: 1em;
margin:100px auto;
box-shadow: 0 0 0 .6em #655;
outline:.6em solid #655;

效果如下:

令我们感到惊喜的是,outline属性并不会随着outline属性走,但是box-shadow属性却可以,当我删除outline属性时,效果如下:

删除box-shadow属性时,效果如下:

因此我们可以通过把这两者叠加在一起来实现我们刚开始实现的容器外围有一层边框但内侧有圆角的效果,为了让这种方式的原理体现的更加明显,我将阴影颜色和outline的颜色设置为两种不同的颜色来观察,效果如下: