边框内圆角
背景知识:box-shadow,outline,“多重边框”
一、两个div嵌套
两个div实现内圆角很容易,只需要内圆角外直角即可。
div First Try
1 2 3 4 5 6 7 8 9 10
| .box{ width: 200px; padding: 20px; background-color: #655; } .content{ background-color: tan; border-radius: .8em; padding: 20px; }
|

这种方案更加灵活,我们可以在box上设置更多的样式,但是需要两个元素才能实现。
二、box-shadow + outline 方案
还记得上篇中,outline和box-shadow对于圆角的区别显示吗?box-shadow会贴合border的圆角,outline不会。当我们仅需要实现一个实色的边框加内圆角,使用这个方案可以达到相同的效果。
box-shadow + outline First Try
1 2 3 4 5 6 7
| width: 160px; background: tan; border-radius: .8em; padding: 20px; margin: 20px; box-shadow: 0px 0px 0px .4em #655; outline: 20px solid #655;
|

这种方案中,box-shadow
是用来填补outline
和border
之间的间隙的,如果不加box-shadow
效果会是这样的。

- 所以我们需要设置
box-shadow
的扩散半径来弥补四个类似三角形的空隙。
- 至于扩散半径的大小,我们可以用勾股定理设置。
- 也就是
border-radius
的圆角圆心到角的距离 - 半径。
(√2 - 1)r
; √2 ≈ 1.4
那么(√2 - 1)
也就是在0.4 - 0.5
之间,我们可以按0.5计算即可。也就是0.5r。
最后再回顾一下box-shadow
的用法,outline
和border
用法一样,同时可以使用outline-offset: -30px;
调整位置。
1
| /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
|
1
| box-shadow: 2px 2px 2px .4em #655;
|
说起这个有人会说,为什么不用outline-offset:-10px;
这样来顶替box-shadow
呢?试一下就知道了。outline
的显示层级较border
更高,所以border的圆角会被覆盖掉。

最终案例代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 200px; padding: 20px; background-color: #655; } .content{ background-color: tan; border-radius: .8em; padding: 20px; } .box2 { width: 160px; background: tan; border-radius: .8em; padding: 20px; margin: 20px; box-shadow: 0px 0px 0px .4em #655; outline: 20px solid #655; } </style> </head> <body> <div class="box"> <div class="content"> 对酒当歌,人生几何。 </div> </div> <hr> <hr> <hr> <div class="box2"> 对酒当歌,人生几何。 </div> </body> </html>
|