![[css]《css揭秘》学习（四）-一个元素实现内圆角边框](https://img.zhankr.net/x4waqznpivw47437.png)
如图所示的圆角边框有两个元素很好实现，用一个元素也可以实现。
<html> <head> <meta charset="utf-8"> <title>灵活的背景定位2</title> <style type="text/css"> div{ max-width: 10em; border-radius: .8em; padding: 1em; margin: 1em; background: tan; font:100% / 1.5 sans-serif; } </style> </head> <body> <div>I have a nice inner rounding, don't I look pretty?</div> </body> </html>
以上代码生成的图案还没有边框：
![[css]《css揭秘》学习（四）-一个元素实现内圆角边框](https://img.zhankr.net/fayllx05q5u47438.png)
加上：box-shadow:0 0 0 .6em #665，生成边框，边框跟随内容的形状：
![[css]《css揭秘》学习（四）-一个元素实现内圆角边框](https://img.zhankr.net/rwboiv155fu47439.png)
加上outline的边框，边框宽度要大于（根号2-1）*圆角的半径，可以直接取0.5倍的半径，outline:.5em solid #665;
![[css]《css揭秘》学习（四）-一个元素实现内圆角边框](https://img.zhankr.net/lcvw5hs1nfi47440.png)
