# 边框内圆角

背景知识： 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。

box-shadow

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>

复制代码

← 背景定位多重边框 →