---
tags: Css
---
# 完美的圓角
###### tags: `css`
一個元素的外部和內部都有一個圓角
可以使用一個小公式來創建相對大小的完美圓角：

這些變量是：

P：每個半徑之間的填充（空間）
R：內（原始）半徑
RO：計算出的外半徑

## HTML

<div class="matched-radius">
    <div class="matched-radius__inner"></div>
</div>

## CSS

.matched-radius {
  --matched-radius-padding: 8px;
  --matched-radius-inner-size: 12px;

  padding: var(--matched-radius-padding);
  border-radius: calc(
    var(--matched-radius-inner-size) + var(--matched-radius-padding)
  );
}

.matched-radius__inner {
  border-radius: var(--matched-radius-inner-size);
}