Перейти к основному содержанию
iotools.cloudiotools.cloud

Генератор outline CSS

API reference

Создавайте CSS-свойства outline и outline-offset: толщину, стиль, цвет и отступ — с живым предпросмотром и готовым правилом :focus-visible для доступных фокус-рамок. Копируйте CSS и HTML.

Ввод

Используется только для предпросмотра и HTML-фрагмента.

Расстояние между краем элемента и линией outline. Отрицательные значения рисуют outline внутри.

Современные браузеры повторяют скругление углов для outline.

Ограничивает правило фокусом с клавиатуры — рекомендуемым подходом для фокус-рамок.

Вывод

Здесь появится блок с outline.

Объявления outline
CSS
HTML
Это было полезно?

Другие способы использовать этот инструмент

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-outline-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{}'

Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.

Спросите у ИИ-агента

Use the IOTools `css-outline-generator` tool (CSS Outline Generator) on this input:

YOUR_INPUT_HERE

Вставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.

Виджет для встраивания

<iframe
  src="https://iotools.cloud/embed/css-outline-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Генератор outline CSS — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.

Стоимость вызова API/MCPОт 5 кредитов
Нужно больше кредитов?Посмотреть тарифы

Также доступно через

ИнтеграцииРасширение для браузераРасширение для VS Code

Руководства

Свойство CSS outline рисует линию вокруг элемента, не меняя его размер и не сдвигая соседние элементы, — в этом его отличие от border. Оно лежит в основе фокус-рамок для клавиатуры. Этот генератор позволяет настроить толщину, стиль, цвет и outline-offset с живым предпросмотром, а затем скопировать CSS.

Как пользоваться

  1. Задайте толщину, стиль и цвет. Доступно восемь стилей: solid, dashed, dotted, double, groove, ridge, inset и outset.
  2. Настройте отступ. outline-offset задаёт расстояние между элементом и линией. Отрицательное значение рисует outline внутри края элемента.
  3. Выберите радиус скругления. Современные браузеры делают outline повторяющим скруглённые углы.
  4. Включите «Показывать только при :focus-visible», чтобы получить правило, которое появляется только при фокусе с клавиатуры — рекомендуемый шаблон для фокус-рамок.
  5. Скопируйте результат: объявления, полное CSS-правило и соответствующий HTML-фрагмент.

Outline и border

  • Outline не занимает место в вёрстке, поэтому его изменение никогда не сдвигает страницу.
  • Outline можно отодвинуть от элемента; border — нельзя.
  • Outline одинаков со всех сторон и в современных браузерах следует за border-radius.

Советы по доступности

  • Никогда не пишите outline: none без видимой замены. Пользователи клавиатуры полагаются на фокус-рамку.
  • Стремитесь к контрастности 3:1 между цветом outline и окружающим фоном.
  • Outline толщиной 2–3 px с отступом 2 px — понятный и широко используемый вариант по умолчанию.

Для декоративных рамок попробуйте Генератор стиля border CSS. Для мягкого свечения см. Генератор box-shadow CSS.

Конфиденциальность

Всё работает в вашем браузере. Ваши настройки никогда не загружаются на сервер.

outlineoutline-offsetfocus ringfocus-visiblecss outlineaccessibilityborder alternative

Нравятся инструменты? Уберите рекламу.

Один платёж навсегда убирает всю рекламу с вашего аккаунта. Без подписки, без слежки.

Убрать рекламу