4、边框内圆角

只使用一个元素的情况下实现内边框圆角的效果，如下图。

利用边框的扩展属性和外边距不贴合圆角的特性，可以实现。

outline: 15px solid saddlebrown;
border-radius: 20px;
box-shadow: 0 0 0 15px saddlebrown;

当阴影扩展的颜色与描边的颜色不同时，可以看出这个效果的差别。

outline: 15px solid saddlebrown;
border-radius: 20px;
box-shadow: 0 0 0 15px red;

所以，使用这一技巧是有一定限制的：

1. 阴影扩张的搬家必须小于描边的宽度，否则描边无法将阴影完全遮住。
2. 扩张半径还需要大于(√2-1)*r，r为圆角的大小，可以直接使用圆角的一半，因为√2-1<0.5。否则扩张半径和描边之间就会出现空白。
3. 这个技巧利用了描边不贴合圆角的特性，但是在未来CSS的规范可能会改变，使得描边会贴合圆角。