Проекты с открытым исходным кодом > Other Open Source > Books/Manuals/Tutorials &&

В избранное Ответвления

OSCHINA-MIRROR/lhammer-You-need-to-know-css

Присоединиться к Gitlife

Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)

Присоединиться бесплатно

Клонировать/Скачать

inner-rounding.md 2.1 КБ

# Округлённые внутренние углы

?> Обзор: :point_right: [box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow), [outline](https://developer.mozilla.org/en-US/docs/Web/CSS/outline)

Мы знаем, что `box-shadow` плотно прилегает к округленному краю `border-radius`. Однако, контур `outline` не совпадает с округленным краем `border-radius`. Мы можем объединить эти два свойства, используя `box-shadow` для заполнения промежутка между контуром `outline` и округленным краем.

!> Какое значение использовать для радиуса расширения? Предположим, что радиус округления `border-radius` равен `r`. По теореме Пифагора минимальное значение радиуса расширения должно быть равно `(√2−1)r ≈ 3.314`. Максимальное значение не может превышать ширину контура, то есть `6px`.

<vuep template="#inner-rounding"></vuep>

<script v-pre type="text/x-template" id="inner-rounding">
<style>
  main {
    width: 100%;
    padding: 60px 80px 80px;
  }
  div {
    width: 209px;
    margin: 29px auto;
    padding: 8px 16px;
    border-radius: 8px;
    background: #f4f0ea;
    outline: 6px solid #b4a078;
  }
  input {
    margin-left: calc(50% - 45px);
  }
  input:checked ~ div {
    box-shadow: 0 0 0 5px #b4a078;
  }
</style>
<template>
  <main>
    <input id="ck" type="checkbox" checked />
    <label for="ck">box-shadow</label>
    <div>A paragraph of filler text. La la la de dah de dah de dah de la.</div>
  </main>
</template>
<script></script>
</script>

### Поддержка браузерами

<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-boxshadow&amp;periods=future_1,current,past_1,past_2,past_3&amp;accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>

Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История

Отправлено 10.03.2025 04:31 b50c8d4

Округлённые внутренние углы

?> Обзор: box-shadow, outline

Мы знаем, что box-shadow плотно прилегает к округленному краю border-radius. Однако, контур outline не совпадает с округленным краем border-radius. Мы можем объединить эти два свойства, используя box-shadow для заполнения промежутка между контуром outline и округленным краем.

!> Какое значение использовать для радиуса расширения? Предположим, что радиус округления border-radius равен r. По теореме Пифагора минимальное значение радиуса расширения должно быть равно (√2−1)r ≈ 3.314. Максимальное значение не может превышать ширину контура, то есть 6px.

<script v-pre type="text/x-template" id="inner-rounding"> <style> main { width: 100%; padding: 60px 80px 80px; } div { width: 209px; margin: 29px auto; padding: 8px 16px; border-radius: 8px; background: #f4f0ea; outline: 6px solid #b4a078; } input { margin-left: calc(50% - 45px); } input:checked ~ div { box-shadow: 0 0 0 5px #b4a078; } </style> box-shadow

A paragraph of filler text. La la la de dah de dah de dah de la.

<script></script> </script>

Поддержка браузерами

<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-boxshadow&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>

Опубликовать ( 0 )

Вы можете оставить комментарий после Вход в систему

1

https://api.gitlife.ru/oschina-mirror/lhammer-You-need-to-know-css.git

git@api.gitlife.ru:oschina-mirror/lhammer-You-need-to-know-css.git

oschina-mirror

lhammer-You-need-to-know-css

lhammer-You-need-to-know-css

master