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

Дерево навыков/Границы, контуры и тени/ Sliced image borders

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

    • Image source

      Использует готовый `<image>` как border source.

    • Shorthand `border-image`

      Согласованно задаёт source, slice, width, outset и repeat.

    • Image slicing

      Разрезает source на девять regions.

    • Image-border width

      Определяет толщину border-image area.

    • Image repetition

      Выбирает способ заполнения edge regions.

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

    • Source fallback

      Возвращается к ordinary border при `none` или invalid image source.

    • Four slice offsets

      Независимо задаёт top/right/bottom/left cuts.

    • Slice percentages

      Вычисляет percentage cuts относительно intrinsic image dimensions.

    • Center fill

      Сохраняет и рисует center region при keyword `fill`.

    • Image outset

      Расширяет painted image area за border box без роста layout.

    • Stretch tiling

      Растягивает один tile вдоль edge region.

    • Repeated tiling

      Повторяет edge tile с возможным частичным крайним tile.

    • Rounded tiling

      Масштабирует tiles до целого числа повторений.

    • Spaced tiling

      Распределяет свободное пространство между целыми tiles.

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

    • Nine-slice geometry

      Сопоставляет source regions с corners, edges и center border-image area.

    • Corner scaling

      Масштабирует corner images по двум измерениям без tiling.

    • Edge tile sizing

      Получает orthogonal tile size из adjoining border-image widths.

    • Center-region geometry

      Растягивает или tiling-обрабатывает center region независимо от edges.

    • Layout boundary

      Сохраняет ordinary border dimensions независимо от image outset и painting.

    • Table-image boundary

      Учитывает ограниченную применимость border images в table border models.