知识储备
1.2-3节的box-shadow以及outline
测试
需要实现的效果图
内圆角div
解法一：
示例代码1
html
<div class="something-meaningful">
<div>
I have a nice subtle inner rounding,
don't I look pretty?
</div>
</div>
css
.something-meaningful{
width: 200px;
margin: 0 auto;
background-color: #655;
padding: .8em;
}
.something-meaningful>div{
padding: 1em;
border-radius: .8em;
background-color: tan;
}
缺点：复杂的html结构，如何只用一层div实现？
利用上一节学到的outline的直角特性和box-shadow的圆角特性实现
回顾一下outline
outline的直角特性
思考：如何利用box-shadow来实现？
box-shadow需要填补的空白
设radius = r;
box-shadow的宽度必须大于 （根号2-1） 小于 outline的宽度
示例代码2
html
<div>
I have a nice subtle inner rounding,
don't I look pretty?
</div>
css
width: 200px;
margin: 30px auto;
background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 0.4em #655; //!填补圆角空白处
outline: .6em solid #655;
**box-shadow: 0 0 0 0.4em #655; **
计算过程 ：
因为(根号2-1) ~= 0.5
所以取0.4em
最终效果图：
内圆角div
到此内圆角介绍完了，我对其感到十分感兴趣，继续学习CSS Secrets！
