Изображение, добавляемое на web-страницу, можно поместить в рамку различной ширины. Для этого служит параметр border тега . По умолчанию рамка вокруг Имаги не отображается за исключением случая, когда рисунок является ссылкой. Цвет рамки в этом случае совпадает с цветом контента, заданным с помощью стиля или параметра text тега (пример 1).
Пример 1. Добавление рамки вокруг Имаги
border="2" alt="Рамка зеленого цвета толщиной 2 пиксела">
Для добавления вокруг изображения цветной рамки применяется стилевое свойство border . В стилях добавляем это свойство к селектору img и указываем толщину рамки, её цвет и стиль. Тогда рамка добавится для всех изображений на странице. Для выбранных рисунков можно ввести собственный класс и писать его только для выбранных элементов (пример 1).
Пример 1. Добавление рамки
В данном примере к двум изображениям добавляется класс border , через который устанавливается зелёная рамка (рис. 1).
Рис. 1. Рамка вокруг фотографий
Рамку можно добавлять и при наведении курсора на изображение через псевдокласс :hover . Но это ожидаемо приведёт к сдвигу картинки, поскольку свойство border влияет на общую ширину и высоту элемента. Чтобы избежать такого поведения к селектору img предварительно добавляется невидимая рамка, как показано в примере 2.
Пример 2. Рамка вокруг изображений
Другой способ добавления рамки — использование свойства outline . Оно, в отличие от border , не влияет на размеры элемента, поэтому прозрачная рамка уже не нужна.
Несмотря на схожесть этих свойств, у них есть небольшие различия:
- outline выводится вокруг элемента ( border внутри);
- outline не влияет на размеры элемента ( border добавляется к ширине и высоте элемента);
- outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах ( border можно использовать для любой стороны или всех сразу);
- на outline не действует радиус скругления, заданный свойством border-radius (на border действует).
Ещё один способ создания рамки заключается в добавлении фона к . Сам фон сразу не виден, поэтому надо установить ещё свойство padding , его значением выступает толщина рамки (пример 3).
Пример 3. Использование background и padding
Сюда же можно включить свойство border и получить новый вид рамки. Вообще, комбинируя padding , border , outline и background можно сделать множество самых разнообразных рамок.
В этом уроке будет показано, как выводить картинку на страницу и задавать значения некоторых параметров: длина, ширина, "название", толщина и цвет рамки.
Создайте папку "images" в той же директории (общей папке), в которой у вас находятся html-страницы. После этого в папку "images" загрузите какую-нибудь картинку, например эту:
Для вывода изображения применяется тег " " . Внутри него пишется путь к изображению и задаются нужные параметры.
Для начала просто напишем путь к изображению — оно будет выведено в оригинальном размере:
Теперь зададим картинке параметры длины, ширины и название.
Рамка вокруг изображения HTML |
Рассмотрим, как сделать рамку вокруг изображения и задать ей цвет и ширину. Это делается с помощью простого атрибута CSS — style="border: " в котором задаётся ширина и цвет рамки.
В следующем уроке будет рассмотрен вывод изображения относительно текста.