边框内圆角
背景知识：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>
|
