2-4 内圆角

知识储备

1.2-3节的box-shadow以及outline

测试

需要实现的效果图

内圆角div

解法一：
示例代码1
html

 
   
     
     I have a nice subtle inner rounding,   
     don't I look pretty?  
  

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

 
  I have a nice subtle inner rounding, 
  don't I look pretty?

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！