Стань PHP-разработчиком с нуля с трудоустройством в IT-компании

Дерево навыков/Границы, контуры и тени/ Border edges и corners

  1. Базовый уровень

    • Border width

      Задаёт border thickness через length или thin/medium/thick.

    • Border style

      Выбирает solid, dashed, dotted, double или pseudo-3D line style.

    • Border color

      Задаёт color обычной border line.

    • Shorthand `border`

      Согласованно задаёт и сбрасывает width, style и color всех edges.

    • Side shorthands

      Управляет width, style и color отдельной physical side.

    • Border `currentColor`

      Получает default border color из текущего foreground color.

    • Border radius

      Скругляет все corners через shorthand `border-radius`.

    • Corner radii

      Задаёт radius отдельного physical corner.

  2. Продвинутый уровень

    • Quad expansion

      Раскладывает одно–четыре значения по top/right/bottom/left.

    • Physical edges

      Независимо управляет top, right, bottom и left borders.

    • Logical edges

      Управляет block/inline start/end borders.

    • Writing-mode mapping

      Разрешает logical edge в physical side текущего writing mode.

    • Style `none`

      Убирает border painting и получает zero resolved/used width.

    • Style `hidden`

      Отличает hidden border от none и учитывает table-specific boundary.

    • Used border width

      Различает declared/computed width и фактическую paint/layout thickness.

    • Elliptical radii

      Независимо задаёт horizontal и vertical corner radii.

    • Radius overlap

      Пропорционально уменьшает radii, если corner curves перекрываются.

  3. Экспертный уровень

    • Inner corner radii

      Вычисляет padding/content-edge radii из outer radius и edge thickness.

    • Unequal-width corners

      Формирует плавный переход между adjoining borders разной толщины.

    • Edge painting

      Распределяет line style и color по прямым edges и corner regions.

    • Corner clipping

      Ограничивает backgrounds и border painting rounded corner geometry.

    • Overflow corner clipping

      Передаёт rounded inner edge общей overflow-clipping модели.

    • Logical/physical conflicts

      Разрешает cascade между logical и physical border declarations.

    • Table-border boundary

      Передаёт conflict resolution collapsed borders владельцу table layout.