Border frame html: Атрибут border | htmlbook.ru

Leave a Comment / Html / By /

HTML/Атрибут frameborder (Элемент iframe)

/html/iframe/frameborder:> Управление отображением рамки фрейма_

Синтаксис

(X)HTML

<iframe src="..." frameborder="[значение]">
  ...
</iframe>

Описание

Атрибут / параметр frameborder (от англ. «frame border» ‒ «рамка кадра») добавляет или удаляет рамку вокруг встроенного фрейма.

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

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

Спецификация

Верс.Раздел
HTML
2.0—
3. 2
—
4.0116.2.2 The FRAME element
frameborder = 1|0 [CN]…
DTD: Transitional Strict Frameset
5.04.7.2 The iframe element
5.14.7.6. The iframe element
XHTML
1.0Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1.1—

Значения

0
no
Удаляет рамку вокруг встроенного фрейма.
1
yes
Добавляет рамку вокруг встроенного фрейма.

Примечание: значения «no» и «yes» не являются значениями (X)HTML спецификации.

Пример использования

Листинг кода

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title>Параметр frameborder (Элемент iframe)</title>
</head>
<body>
<h2>Пример с атрибутом «frameborder»</h2>
<iframe src=»../iframe.html» frameborder=»1″>Ваш веб-браузер не поддерживает встроенные фреймы.</iframe>
</body>
</html>

Параметр frameborder (Элемент iframe)

Еще раз про border-image — CSS-LIVE

Хотя свойство border-image уже поддерживают более 96% браузеров (с оговорками, но всё же), популярным пока его не назовешь. Пожалуй, поначалу оно кажется неоправданно сложным: объединяет в себе 5 отдельных свойств, каждое с несколькими значениями, да еще неочевидные правила взаимодействия с обычным border — легко запутаться. Даже многие неплохие руководства (типа статьи Дадли Стори, которую мы переводили в прошлом году) грешат тем, что даже после них ощущение сложности не проходит.

Есть мнение, что его сложность преувеличена, а возможности недооценены. Попробуем исправить это упущение.

0.

border-image = border + image

Название свойства состоит из двух слов: «рамка» и «картинка». Вокруг них всё и вертится. Интуитивно его действие можно представить в виде примерно такого алгоритма:

  1. Берем картинку.
  2. Вырезаем из этой картинки рамку.
  3. Заготавливаем «каркас» рамки по размерам нужного блока. Если надо, подгоняем ее толщину, положение краев и т.д.
  4. «Натягиваем» вырезанную часть картинки на этот «каркас».

В таком ракурсе мы его сейчас и рассмотрим.

1. Картинка:

border-image-source

В теории, картинка может быть чем угодно, что относится к типу CSS-значения «image» (описано в модуле значений изображения и замещаемого содержимого 3 уровня). Это может быть растровая картинка (отдельный файл или data uri) и SVG-картинка (отдельный файл, base64 или прямо SVG-код с минимально заэкранированными спецсимволами!). Или CSS-градиент. И даже любой элемент страницы — благодаря функции

element(). Конечно, не всё из этого поддерживается во всех браузерах, но с растровыми картинками, SVG и градиентами давно почти везде нет проблем, а этого для типичных задач хватает с избытком.

С векторными картинками и градиентами есть пара нюансов:

  1. Не у каждой картинки есть конкретные размеры. Соответственно, не из каждой картинки можно вырезать рамку, задавая ей размеры в пикселях. С градиентами вообще лучше всегда работать в процентах.
  2. Градиент может быть только один. Неприятный сюрприз по сравнению с фонами: если фоны у нас множественные, благодаря чему можно собирать целые паттерны из нескольких слоёв разного размера и положения, то здесь нам фактически доступен лишь один такой слой. Так что паттерны из градиентов в
    border-image     использовать нельзя.

Точнее, было нельзя до недавних пор. Несколько недель назад CSS-волшебница @yoksel открыла для нас новый секретный уровень CSS. Если задать для border-image SVG-картинку с инлайновыми стилями, внутри них может быть много чего интересного, включая паттерны из нескольких градиентов. Но будьте внимательны, такая магия требует мастерства и глубокого понимания происходящего! Иначе можно сломать мозг себе и браузеру.

Я не волшебник, только учусь, так что меня пока хватило только на такую небольшую вариацию:

See the Pen три градиента в border-image by Ilya Streltsyn (@SelenIT) on CodePen.

2. Вырезка рамки:

border-image-slice

Наша картинка разделяется на 9 «плиток». 8 внешних (4 угловых и 4 боковых) — по сути и есть рамка. А центральная «плитка» либо выбрасывается, либо (если задать ключевое слово fill) заполняет рамку изнутри, как фон.

«Линии разреза» задаются значениями свойства border-image-slice. Если присмотреться, оно очень похоже на обычный border-width! Те же 1–4 значения через пробел, тот же порядок (по часовой стрелке, верх-право-низ-лево), тот же смысл сокращенных записей (3 значения — верх, одинаковые бока и низ, 2 значения — верх-низ и бока, 1 значение — одинаковая толщина со всех 4 сторон). Только единицы измерения другие: либо проценты (от размеров картинки), либо безразмерные «единицы системы координат картинки». Для растровой картинки это ее «родные», исходные пиксели. Так что ни те, ни другие единицы никак не зависят от экрана, масштаба и т.п.

Не так интуитивно, когда суммарная толщина противоположных сторон рамки становится больше размера картинки. Тогда разные угловые «плитки» пересекутся — какая-то часть картинки окажется сразу на нескольких из них. Это легче представить как то, что исходной картинки у нас было 4 экземпляра, и из каждого щедро вырезали по углу. Плиток нулевого и отрицательного размера не бывает, поэтому при такой «нарезке» центральная «плитка» и пара боковых исчезают, остаются лишь угловые. В пределе, при border-image-slice:100% — странно, но это значение по умолчанию — этими оставшимися угловыми «плитками» станет вся картинка целиком.

Лучше увидеть и «пощупать» это вживую:

See the Pen LROoRZ by Ilya Streltsyn (@SelenIT) on CodePen.

3. Тонкая настройка:

border-image-width и border-image-outset

Художественные эффекты, включая рисованные рамки, часто требуют настройки с точностью до пикселя. У border-image целых две «степени свободы» для этого.

Итоговая толщина рамки:

border-image-width

С помощью border-image-width можно регулировать окончательную толщину рисованной рамки, совсем как с border-width — толщину обычной.

Можно указывать толщину сторон рамки в обычных единицах длины (px, em, vh…), и эти стороны отмасштабируются до указанного значения (составляющие ее «плитки» сожмутся или растянутся поперек, угловые плитки масштабируются по обеим осям независимо). Но у него бывают еще три типа значений:

  • безразмерные коэффициенты — за единицу берется толщина соответствующей стороны обычного border-width.
  • проценты. Да-да, проценты для рамки! Чисто визуальной, но всё же. Считаются от общего размера рамки (с учетом того, что она может выступать за края блока, см. ниже).
  • ключевое слово auto — используется исходный размер соответствующих «плиток», т.е. соответствующее значение из border-image-slice.

Значение по умолчанию — как раз безразмерное 1

: рисованная рамка масштабируется до толщины, заданной обычному border-у. Иногда, если нужно просто «залить рамку текстурой», это логично. Но часто удобнее задавать border и border-image-width по отдельности. Если же не указать ни того, ни другого, рамка не появится вообще (ее толщина будет нулевой).

Удобное значение auto: сколько пикселей «вырезали» из картинки, такую толщину рамки и получили, ничего не искажается. Есть нюанс: border-image-width считается в обычных CSS-пикселях, а border-image-slice — в исходных пикселях картинки. Поэтому на Retina-экранах при auto растровая картинка может «мылить». Чтобы сделать рамку двойной четкости из картинки двойного размера, придется явно указывать для border-image-width половины значений border-image-slice

(т.е. вдвое уменьшать исходные «плитки»).

И еще один важный нюанс: максимальный размер рамки у нас фиксирован, так что сумма противоположных сторон всегда втискивается в этот предел. Если сумма размеров «плиток» для противоположных сторон рамки оказывается больше, они пропорционально ужимаются, чтобы вписаться хотя бы впритык:

See the Pen Автомасштабирование border-image до размеров контейнера by Ilya Streltsyn (@SelenIT) on CodePen.

Примечание: работа над этим примером заставила меня осознать беспощадный факт, что составляющие border-image не анимируются. Выручил JS. Зато как минимум в Firefox внутри SVG-картинок в border-image работают SMIL-анимации!

Вынос рамки за габариты блока:

border-image-outset

Это уже интереснее: рисованная рамка может выступать за края блока наружу, на внешние отступы и даже на соседние элементы! Редкая в CSS возможность (еще разве что тени да позиционированные псевдоэлементы так умеют). Бывает полезно для вычурных дизайнерских виньеток с веточками/лучиками/тентаклями/любыми др. выступающими деталями. Или для «хвостиков» от «балунов» прямой речи, которыми любят оформлять отзывы и комментарии. Причем выступает она чисто визуально, на блочную модель это не влияет (габариты блока по-прежнему считаются по краям обычного border-а).

По механизму border-image-outset похож на margin. Только наоборот: положительные значения — сдвиг наружу. Кроме обычных единиц длины, тоже можно указывать безразмерные множители для border-width. А вот проценты почему-то нельзя. Сдвигать края внутрь, к сожалению, тоже нельзя (отрицательные значения запрещены), но обычно и не нужно. По умолчанию значение

0 — без сдвига, край рамки совпадает с краем блока.

Эти два свойства отлично работают вместе, если надо точно состыковать с контентом дизайнерскую рамку типа такой:

See the Pen GjxVmp by Ilya Streltsyn (@SelenIT) on CodePen.

Или уголки нестандартной формы с тенью:

See the Pen
SVG as border-image for arbitrary corner shapes with shadow by Ilya Streltsyn (@SelenIT)
on CodePen.

А заодно обеспечить им по-настоящему изящную

деградацию.

4. «Натяжка» рамки на «каркас»:

border-image-repeat

Теперь, когда известны окончательные размеры рамки, пора замостить эту область «плитками». Это работа свойства border-image-repeat. Общий принцип — угловые «плитки» просто разносятся по углам, а боковые заполняют оставшееся между углами пространство, для чего с ними что-то делается. Варианты, что именно делать, такие:

  1. stretch (по умолчанию) — растянуть (или сжать) боковые «плитки» до заполнения оставшегося места, с искажением пропорций. Как будто рамка, которую мы вырезали из картинки, была резиновая, и мы приклеиваем ее к «каркасу» за углы.
  2. repeat — размножить «плитку» и замостить ей это пространство. Как фон c background-repeat: repeat (и background-position по центру стороны). Пропорции сохранятся, но аккуратных стыков с углами никто не гарантирует.
  3. round — размножить и исказить пропорции чуть-чуть — настолько, чтобы в нужное пространство влезло целое число копий «плитки». Тогда стыки с углами будут такими же аккуратными, как на исходной картинке.
  4. space — не искажать пропорции, а взять столько копий, сколько поместится, а оставшееся свободное место поровну «раскидать» вокруг них. Увы, работает пока только в IE11/Edge и Safari 9.1+ (но вот-вот начнет в Firefox 50+).

Можно задать разные значения для горизонтальных и вертикальных сторон (напр. stretch round) или одно значение для всех 4-х. Центральная плитка по каждому измерению ведет себя так, как соответствующие боковые (например, может размножаться по вертикали и растягиваться по горизонтали).

Особых сложностей тут не видно, поэтому ограничимся простейшим примером:

See the Pen PGarao by Ilya Streltsyn (@SelenIT) on CodePen.

На мой взгляд, самые полезные значения — stretch (для сплошных, «монолитных» рамок) и round (для повторяющихся орнаментов).

5. Итого

Сокращенная запись свойства border-image, по спецификации, записывается практически как наш алгоритм:

border-image: <‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’> | / <‘border-image-width’>? / <‘border-image-outset’> ]? || <‘border-image-repeat’>

т.е., в переводе на человеческий: что за картинка — пробел — как ее резать — слеш — какой толщины делать рамку — слеш — насколько выдвигать ее за края — пробел — как натягивать «плитки». Части border-image-width и border-image-outset необязательны. Что именно из них пропущено, определяется по количеству слешей перед оставшимся. Например, в border-image: url(img.png) 50 / 25px round значение 25px — это толщина рамки (до него один слеш), а в border-image: url(img. png) 50 / / 25px stretch — это выступ за края (до него два слеша). Но «что резать», «как резать» и «как растягивать» указывать нужно (первое — по стандарту, остальное — по здравому смыслу).

Cледующий пример — набросок своего рода «песочницы» для этого свойства. Пробуйте загружать или задавать кодом свои картинки и градиенты, менять значения и единицы, смотрите на результат и… копируйте итоговое значение. Надеюсь, из этого получится неплохое дополнение к старому доброму border-image.com:)

See the Pen Конструктор border-image by Ilya Streltsyn (@SelenIT) on CodePen.

И несколько слов о поддержке браузерами. С ней всё хорошо: полностью выпадает лишь IE10 и ниже. Без значения space для border-image-repeat, по-моему, жить можно.

Правда, на CanIUse есть загадочное примечание (про WebKit и Edge 13), которое чуть не сбило меня с толку: «Есть баг, что border-image неправильно перекрывает border-style». Каково же было мое удивление, когда я обнаружил, что все браузеры «перекрывают» компоненты обычного border-а по-разному! Safari в iOS 10 не рисует картинку при border-width: 0, Edge 14 — при border-style: none, Хром (включая Canary 56) — при обоих. А вот Firefox (и IE11, что интересно) рисуют картинку несмотря ни на что, хотя о баге в них не сказано!

После раскопок в спецификациях и консультаций с умными людьми я выяснил, что поведение FIrefox (и IE11) правильное. Это подтверждают официальные тесты к спецификации. По стандарту, составляющие обычного border не должны влиять на border-image чем-либо еще, кроме как через дефолтное значение border-image-width (причем его легко «отвязать», задав конкретное значение). Неразбериха возникла из-за двусмысленной фразы в спецификации, что «при нулевом border-width рамка считается отсутствующей» (без уточнения, идет ли речь только об обычной или о картиночной тоже), а также из-за проблем совместимости со старыми префикснутыми реализациями и гугловским календарем:). Ради совместимости с Хромом, видимо, сломали и Edge. Впрочем, «лекарство» — явно указать, например, border-style: solid и ненулевой border-width — элементарно. К тому же они наверняка всё равно понадобятся для изящной деградации.

И еще две хорошие новости и одна плохая. Хорошая №1 — border-image работает в Опере Мини! Так что его поддержка чуть ли не лучше, чем у border-radius). Хорошая №2 — на сегодня это единственный браузер, которому нужен префикс. И чуть ли не единственный случай, где это префикс -o-. Даже префикс -webkit- уже не актуален! А плохая новость в том, что Опера Мини поддерживает только сокращенное свойство целиком (нельзя задавать, скажем, border-image-slice и border-image-width по раздельности) и не понимает в border-image-repeat не только странного space, но и полезного round.

P.S. Это тоже может быть интересно:

Границы CSS

❮ Предыдущая Далее ❯

Свойства рамки CSS позволяют указать стиль, ширина и цвет границы элемента.

У меня границы со всех сторон.

У меня нижняя граница красная.

У меня закругленные границы.

У меня синяя левая граница.

Свойство border-style указывает, какую границу отображать.

Допускаются следующие значения:

  • dotted — определяет пунктирную границу
  • dashed — Определяет пунктирную границу
  • сплошная — определяет сплошную границу
  • double — Определяет двойную границу
  • канавка — определяет трехмерную границу канавки. Эффект зависит от значения цвета границы
    • .
  • ребро — определяет ребристую трехмерную границу. Эффект зависит от значения цвета границы
    • .
  • вставка — определяет границу 3D-врезки. Эффект зависит от значения цвета границы
  • начало — Определяет начальную границу 3D. Эффект зависит от значения цвета границы
    • .
  • нет — не определяет границы
  • hidden — Определяет скрытую границу

Свойство в стиле границы может иметь от одного до четырех значений (для верхнюю границу, правую границу, нижнюю границу и левую границу).

Пример

Демонстрация различных стилей границы:

p.dotted {border-style: dotted;}
п.штрих {стиль границы: пунктир;}
p.solid {стиль границы: сплошной;}
p.double {стиль границы: двойной;}
p.groove {стиль границы: канавка;}
p.ridge {border-style: гребень;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Результат :

Пунктирная рамка.

Пунктирная граница.

Сплошной бордюр.

Двойная граница.

Граница канавки. Эффект зависит от значения цвета границы.

Граница хребта. Эффект зависит от значения цвета границы.

Врезная рамка. Эффект зависит от значения цвета границы.

Начальная граница. Эффект зависит от значения цвета границы.

Без границы.

Скрытая граница.

Бордюр смешанный.

Попробуйте сами. свойство в стиле границы установлено!

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

9003 900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.

Ширина границы кадра

 

К сожалению, тех, кто тратит время на изучение презентационных аспектов фреймов веб-страниц, очень мало, и еще более прискорбно, что внешний вид фреймов веб-страницы по умолчанию — это, по сути, , уродливый (вероятно, потому, что он слишком часто используется) .

Однако так не должно быть.

Существует ряд атрибутов, которые вы можете применить к своим и , чтобы изменить и (надеюсь) улучшить их внешний вид и удобство использования.

Мы начнем с изучения того, как установить ширину границ рамки. (Все приведенные ниже примеры будут модификацией расширенного макета фрейма, более подробно описанного на предыдущей странице.)

Как установить ширину всех границ фрейма

Чтобы установить ширину всех границ в макете фрейма, используйте как атрибут framespace , так и атрибут border в первичном тег вашего документа с набором фреймов. Значение, используемое в каждом атрибуте, представляет собой ширину в пикселях. (Обратите внимание, что атрибут frameborder должен либо отсутствовать, либо иметь значение "yes" .)

Вот исходный код нашего расширенного макета фрейма, настроенного для отображения границ шириной 20 пикселей:


HTML-фреймы — расширенный макет фреймов

htm">




Вот как это выглядит, если ширина всех границ установлена ​​на 20 пикселей.
Вот как это выглядит с обычными границами.

Как установить ширину

некоторых границ кадра

Чтобы установить ширину только некоторых, но не всех границ фрейма, вставьте атрибуты framespaces и border во вложенный начальный тег .

Вот исходный код нашего расширенного макета фрейма, измененного для отображения границ шириной 20 пикселей только между столбцами в нижней строке фрейма: Макет кадра


htm» name=»menu»>

Вот как это выглядит.

И наоборот, вы можете использовать интервал кадров и border атрибутов в основном наборе фреймов, а затем используйте пару атрибут/значение frameborder="no" во вложенном наборе фреймов.

Вот код:


HTML-фреймы — расширенный макет фрейма




И вот как это выглядит.

(ПРИМЕЧАНИЕ: Internet Explorer и Opera поддерживают атрибуты framespace и border , в то время как браузеры на основе Gecko поддерживают только атрибут border . Лучше всего охватить все базы и использовать оба framespace и граница при настройке ширины границы кадра.)

Как удалить все границы кадра

Чтобы полностью удалить все границы в макете фрейма, используйте атрибут frameborder в основном теге документа с набором фреймов и установите значение «нет» (по умолчанию «да» ).

Вот исходный код нашего расширенного макета фрейма, измененного для отображения без границ:


HTML-фреймы — расширенный макет фрейма




Вот как это выглядит с нет границ .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *