阅读CSS Secrets（三）

inner rounding

1.png

看到这个图会怎么做？外面的框的尖的，里面的框的有弧度的
最简单的办法
一个div中嵌套一个div，外方内圆

<div class="something-meaningful">
  <div> 
    I have a nice subtle inner rounding, don't I look pretty? 
  </div>
</div>

.something-meaningful { 
  background: #655; 
  padding: .8em; 
}
.something-meaningful > div { 
  background: tan; 
  border-radius: .8em; 
  padding: 1em; 
}

2.png

这种方法需要用到两个元素才能实现，如果一定要用一个元素呢？

.something-meaningful > div { 
  background: tan; 
  border-radius: .8em; 
  padding: 1em; 
  border:.6em solid #655;
}

当我只使用border的时候，发现外面的框有了弧度，里面的框没有弧度。因为border-radius会改变border所以这里显然不能用border

3.png

因为border-radius不会影响outline，他总是尖的，所以尝试用outline

.something-meaningful > div { 
  background: tan; 
  border-radius: .8em; 
  padding: 1em; 
  outline: .6em solid #655;  
}

然而这里会有点小bug，因为outline都是直的 ，所以这里会跟content会有点缝隙，如何去解决呢，

4.png

这里可以用到box-shadow

.something-meaningful > div { 
  background: tan; 
  border-radius: .8em; 
  padding: 1em;
  box-shadow: 0 0 0 .6em #655;  
  outline: .6em solid #655; 
}

使用box-shadow来填充缝隙

5.png

当然 这时候你会想到如果只用box-shadow会怎么样，

6.png

box-shadow会随着border-radius变化，填充在content外面。