[css]《css揭秘》学习（四）-一个元素实现内圆角边框

如图所示的圆角边框有两个元素很好实现，用一个元素也可以实现。

 <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揭秘》学习（四）-一个元素实现内圆角边框

加上：box-shadow:0 0 0 .6em #665，生成边框，边框跟随内容的形状：

[css]《css揭秘》学习（四）-一个元素实现内圆角边框

加上outline的边框，边框宽度要大于（根号2-1）*圆角的半径，可以直接取0.5倍的半径，outline:.5em solid #665;

[css]《css揭秘》学习（四）-一个元素实现内圆角边框