Eighteen Blog

边框内圆角

背景知识: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是用来填补outlineborder之间的间隙的,如果不加box-shadow效果会是这样的。
在这里插入图片描述

  1. 所以我们需要设置box-shadow的扩散半径来弥补四个类似三角形的空隙。
  2. 至于扩散半径的大小,我们可以用勾股定理设置。
  3. 也就是border-radius的圆角圆心到角的距离 - 半径
  4. (√2 - 1)r√2 ≈ 1.4那么(√2 - 1) 也就是在0.4 - 0.5之间,我们可以按0.5计算即可。也就是0.5r。

  5. 最后再回顾一下box-shadow的用法,outlineborder用法一样,同时可以使用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>

 评论