css学习笔记4--边框内圆角

如果只用一个元素实现边框内圆角，我们应该怎么做呢？

如果我们给box 增加 outline，那么内圆角和外边框之间会有一定的缝隙：

    div{
            width: 11em;
            height: 3em;
            background-color: tan;
            border-radius: .6em;
            outline: .5em solid #655;
        }
复制代码

所以我们需要填补外边框和容器圆角之间的空隙。

box-shadow + outline可以实现这一效果，局限是只能达成简单的实色效果。如果我们想让边框有更丰富的样式，那么我们就需要借助两个元素了（比如 div套div）。

    div{
            width: 11em;
            height: 3em;
            background-color: tan;
            border-radius: .6em;
            box-shadow: 0 0 0 .5em #655;
            outline: .5em solid #655;
        }
复制代码

效果如图：

投影扩张值不能小于[(根号2）-1]r。

转载于:https://juejin.im/post/5c6e09026fb9a049d81c6fb8