阅读CSS Secrets(三)

inner rounding

阅读CSS Secrets(三)_第1张图片
1.png

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

I have a nice subtle inner rounding, don't I look pretty?
.something-meaningful { background: #655; padding: .8em; } .something-meaningful > div { background: tan; border-radius: .8em; padding: 1em; }
阅读CSS Secrets(三)_第2张图片
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会怎么样,

阅读CSS Secrets(三)_第3张图片
6.png

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

你可能感兴趣的:(阅读CSS Secrets(三))