# 边框内圆角

背景知识: box-shadow (opens new window), outline (opens new window)

我们知道box-shadow是会紧贴border-radius圆角边的,但是,描边outline并不会与圆角边border-radius贴合,我们可以将两者组合,通过box-shadow去填补描边outline所产生的间隙来达到我们想要的效果。

关于扩张半径的取值?假设圆角border-radius的半径为r,根据勾股定理,扩张半径的最小值应等于(√2−1)r ~= 3.314,最大值不能超过描边宽度,即6px

A paragraph of filler text. La la la de dah de dah de dah de la.
<style>
  .main-box-shadow{
    width: 100%;
    padding: 60px 80px 80px;
  }
  .main-box-shadow .demo {
    width: 209px;
    margin: 29px auto;
    padding: 8px 16px;
    border-radius: 8px;
    background: #f4f0ea;
    outline: 6px solid #b4a078;
  }
  .main-box-shadow input{
    margin-left: calc(50% - 45px);
  }
  .main-box-shadow input:checked ~ div{
    box-shadow: 0 0 10px 10px #b4a078;
  }
</style>
<template>
  <div class="main-box-shadow">
    <input id="ck" type="checkbox" checked/>
    <label for="ck">box-shadow</label>
    <div class="demo">A paragraph of filler text. La la la de dah de dah de dah de la.</div>
  </div>
</template>
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
显示代码 复制代码
上次更新: 2023-10-28