2-4 内圆角

知识储备

1.2-3节的box-shadow以及outline

测试

需要实现的效果图

2-4 内圆角_第1张图片
内圆角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

2-4 内圆角_第2张图片
outline的直角特性

思考:如何利用box-shadow来实现?
2-4 内圆角_第3张图片
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

最终效果图:

2-4 内圆角_第4张图片
内圆角div

到此内圆角介绍完了,我对其感到十分感兴趣,继续学习CSS Secrets!

你可能感兴趣的:(2-4 内圆角)