Border css картинкой: Свойство border-image — картинка границы

CSS: иллюстрации & подписи

CSS: иллюстрации & подписи

Смотрите также указатель всех приёмов работы.

На этой странице:

Иллюстрации & подписи

Масштабированная модель Эйфелевой башни в Парке Мини-Франция

В HTML5 включен новый элемент для вставки иллюстрации с подписью. (Мы покажем, как сделать тоже самое в HTML4 ниже.)

<figure>
  <p><img src="eiffel.jpg"
   
    alt="Эйфелева башня">
  <figcaption>Масштабированная
    модель Эйфелевой башни в Парке
    Мини-Франция</figcaption>
</figure>

Например, чтобы сместить изображение вправо на расстояние, равное 30% от ширины окружающих абзацев, используйте следующие правила:

figure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.  5em;
}

На самом деле, действительно необходимы только две первые декларации (float и width), а остальные использованы исключительно для оформления.

Масштабирование изображения

Здесь только одна проблема, и она заключается в том, что изображение может быть слишком широким. В этом случае, ширина изображения всегда будет составлять 136 px и иллюстрация будет занимать 30% от окружающего текста. И если вы сузите окно, то изображение может не поместиться и вылезти за рамку (попробуйте!).

Если вы знаете ширину всех изображений в документе, вы можете указать минимальную ширину иллюстрации следующим образом:

figure {
  min-width: 150px;
}

Сен-Тропе и его форт в вечернем солнце

Другой способ — это задать масштаб самого изображения. Именно это мы и сделали с изображением справа. Как вы, возможно, видете, если вы сделаете окно браузера слишком широким, изображения в формате JPEG масштабируются не очень хорошо.

Но если это изображение — диаграмма или график в формате SVG, то масштабирование работает просто великолепно. Вот разметка, которую мы использовали:

<figure>
  <p><img class=scaled src="st-tropez.jpg"
    alt="Сен-Тропе">
  <figcaption>Сен-Тропе и его форт в
    вечернем солнце</figcaption>
</figure>

А вот таблица стилей:

figure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
img.scaled {
  width: 100%;
}

И в дополнение последнее правило: этот приём делает изображение настолько широким, насколько позволяет пространство внутри иллюстрации (область внутри рамок и отступов — border и padding).

Размещение подписи сверху

Средиземное море около Кап Ферра

HTML позволяет элементу figcaption быть либо первым, либо последним элементом внутри иллюстрации. Если не применять каких-либо правил CSS, это приведёт к тому, что подпись будет размещена либо над иллюстрацией, либо под ней соответственно.

Однако, независимо от разметки текста, вы можете указать в CSS, чтобы подпись появилась либо над изображением, либо под ним. Этого можно достичь, указав браузеру, что изображение должно быть отформатировано как таблица, в которой картинка является единственной ячейкой, а подпись становится заголовком таблицы. Просто добавьте эти правила в таблицу стилей из предыдущей секции:

figure {
  display: table;
}
figcaption {
  display: table-caption;
  caption-side: top;
}

Стиль, который мы использовали на этой странице, содержит рамку серого цвета. Она обрамляет иллюстрацию. К сожалению, когда мы используем табличную разметку, чтобы поместить подпись сверху или снизу, мы должны указать рамку другим способом, потому что подпись размещена за пределами границы таблицы. Мы можем исправить это, поместив часть границы на саму подпись:

figure {
  border-top: none;
  padding-top: 0;
}
figcaption {
  padding: 0. 5em;
  border: thin silver solid;
  border-bottom: none;
}

Иллюстрации & подписи в HTML4

Масштабированная модель Эйфелевой башни в Парке Мини-Франция

HTML4, в отличие от HTML5, не имеет элементов, которые бы позволили вставить в документ изображение с подписью. Это предлагалось сделать (см HTML3), но в итоге в HTML4 предложение не вошло. Вот единственная возможность воспроизвести элемент figure:

<div class=figure>
  <p><img src="eiffel.jpg"
   
    alt="Эйфелева башня">
  <p>Масштабированная модель
    Эйфелевой башни в
    Парке Мини-Франция
</div>

Затем в таблице стилей вы используете класс «figure» для форматирования иллюстрации так, как вам необходимо. Например, чтобы сместить иллюстрацию вправо на расстояние, равное 30% от ширины окружающих абзацев, необходимо применить следующие правила:

div.figure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0. 5em;
  padding: 0.5em;
}

Как и ранее, необходимы только две первые декларации (float и width), а остальные использованы исключительно для оформления.

Масштабирование изображения в HTML4

Чтобы избежать выхода изображения за рамки иллюстрации и при условии, что вы знаете ширину всех изображений в документе, вы можете добавить минимальную ширину DIV следующим образом:

div.figure {
  min-width: 150px;
}

Сен-Тропе и его форт в вечернем солнце

Чтобы смасштабировать изображение на всю ширину иллюстрации (как мы сделали с изображением справа), вы можете добавить атрибут КЛАССА и соответствующее правило CSS, очень похожее на пример с HTML5 выше. Вот разметка, которую мы использовали:

<div class=figure>
  <p><img class=scaled src="st-tropez.jpg"
    alt="Сен-Тропе">
  <p>Сен-Тропе и его форт
    в вечернем солнце
</div>

А вот таблица стилей:

div. figure {
  float: right;
  width: 30%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}
img.scaled {
  width: 100%;
}

Одно дополнение: этот приём делает изображение настолько широким, насколько позволяет DIV (площадь внутри border и padding).

Размещение описания сверху в HTML4

Средиземное море около Кап Ферра

Чтобы разместить подпись сверху, добавьте эти правила в таблицу стилей из предыдущих секций:

div.figure {
  display: table;
}
div.figure p + p {
  display: table-caption;
  caption-side: top;
}

‘+’ приводит к тому, что правило действует на элемент P, который следует за другим P. Что означает, что условие действует на второй элемент P иллюстрации, который содержит описание картинки.

(Эта техника может привести к ошибкам в некоторых браузерах, разработанных ранее 2003, особенно в комбинации с масштабированием изображений, как в примере выше)

Как и прежде, серая рамка, которую мы выбрали для обрамления иллюстраций на этой странице, будет обрамлять только само изображение. Чтобы рамка была вокруг изображения

и подписи, добавьте эти правила:

div.figure {
  border-top: none;
  padding-top: 0;
}
div.figure p + p {
  padding: 0.5em;
  border: thin silver solid;
  border-bottom: none;
}

Навигация по сайту

5 приемов работы с CSS, о которых вам следует знать | by Nikita | WebbDEV

Наблюдая за потоком вопросов по CSS уже давно заметил, что многие из них повторяются много-много раз. Да, есть совсем глупые вопросы, на которые так и тянет ответить RTFM! Но есть и более занятные. Они связаны с не совсем стандартной версткой. Не такой, чтобы глаза на лоб лезли, но и заметно выходящей за рамки условного бутстрапа и традиционных туториалов для новичков. Похожие вопросы довольно сложно загуглить — обычно вся суть в картинке, но и отвечать каждый раз надоедает. В этой статье мы постараемся посмотреть некоторые приемы, охватывающие довольно широкий круг подобных вопросов. Информация в первую очередь адресуется начинающим верстальщикам, но возможно и опытным будет, чем вдохновиться.

Начнем с простого. Если трансформировать элемент-контейнер, а затем применить противоположную трансформацию к его контенту, то можно получить много всего интересного. Это часто используют для создания косых секций. Рассмотрим следующую разметку:

Довольно просто, ничего лишнего. Из нее мы получаем вот такой результат:

Как это произошло? Здесь мы применили transform: skew(-15deg) для блока и transform: skew(15deg) для контента — картинок и ссылок. Собственно вот и все. Применили трансформацию и отменили ее для потомков. Выглядит это примерно так:

При использовании transform: skew может возникать необходимость компенсировать длину контента или немного его подвинуть, что мы и сделали с помощью transform: translate.

В подобных компонентах часто применяются картинки в виде тега img. Будет очень не лишним вспомнить про object-fit: cover.

Разумеется, подобные действия можно совершить и с другими трансформациями. Например rotateдает нам возможность сделать циферблат или расположить фотографии по кругу:

Принцип работы тот же. Применили трансформацию и отменили ее для дочерних элементов:

У нас в CSS довольно ограниченные возможности по оформлению границ элементов. Но в голове дизайнера все совсем по-другому. Это приводит к тому, что начинающий верстальщик часто встает в ступор и предлагает дать дизайнеру клавиатурой по голове. На Тостере часто спрашивают о том, как оставить от стандартного бордера только уголки, сделать двойной/тройной бордер и.т.д. Все подобные вопросы можно решить с помощью градиентов.

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

Собственно лучше всего проиллюстрирует эти слова живой пример:

Здесь мы видим два подхода к использованию градиентов: в border-image и background-image. Первый вариант может быть удобен в сочетании со свойством border-image-slice, а второй уже давно популярен для рисования чего угодно.

В Safari как всегда есть проблемы с прозрачностями. Всегда используйте развернутую запись с border-width и border-style, как в первом примере, вместо короткой border: 3px solid transparent.

И раз уж мы говорим о бордерах, скажем пару слов о дублировании. Тоже полезный прием. Если у элемента есть бордер, мы можем взять один из его псевдоэлементов (::before или ::after), положить его сверху, задать тот же размер в 100% / 100% и полностью или частично продублировать бордер основного элемента.

Это даст возможность сделать “вылезание” контента через границу элемента:

Подобный эффект часто встречается на рекламных страницах, так что его точно стоит взять на вооружение.

Не забывайте добавлять pointer-events: none всем элементам, которые перекрывают контент.

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

Рассмотрим пример. Нужно сделать эффект фонарика (что-то вроде освещения фона и границ элементов в некотором радиусе от курсора). Как подойти к этому вопросу?

Допустим у нас уже есть разметка:

Можем ли мы как-то добавить подсветку прямо сюда? Да. Причем решение очень простое:

• Кладем сверху на все это большой радиальный градиент с прозрачной дыркой в центре
• С помощью z-index вырываем контент из текущего контекста и он автоматически располагается поверх градиента

Сам по себе радиальный градиент не представляет из себя ничего необычного:

В подобных эффектах, привязанных к мышке часто применяют размеры в 200vh/200vw для того, чтобы их края не вылезали в видимую пользователем область.

Получился бутерброд. Снизу остались бордеры, посередине лег градиент, сверху все накрылось контентом. Даже в существующую разметку такой эффект добавится всего одним элементом и парой строк CSS. Бывают конечно исключения, но все же. Осталось только оживить эффект, привязав его к мышке:

Подобный прием также можно применять и с модальными окнами или меню, перекрывая все остальное красивой тенью.

Бутерброды. Хмм… Есть еще один. Очень полезный. Решает он следующую проблему: если у нас есть какая-то схема, карта, график или еще что-то в виде SVG картинки, вставленной в разметку, то при адаптивном изменении ее размера начинают уменьшаться или увеличиваться тексты на ней. Это мало того, что может приводить к их “размыливанию” и искажению пропорций, но и выбивает эту самую схему или график из общего стиля страницы.

Чтобы это дело поправить, можно класть поверх SVG обычный div, в котором верстать все эти надписи абсолютным позиционированием.

Удобно сразу делать viewbox='0 0 100 100' у картинки, чтобы координаты абсолютного позиционирования в слое HTML совпали с ними же в слое SVG.

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

Начинающие верстальщики, изучайте и используйте все возможности, которые предоставляют вам ваши инструменты. Мир меняется. Многие тяжелые плагины для jQuery сейчас легко заменить парой строк CSS, да и возможности по оформлению страниц не идут ни в какое сравнение с тем, что было в начале 2000х. Пора уже изменить восприятие мира веб-разработки, принять тот факт, что “верстка” становится все более широкой областью деятельности, и начать уже делать современные сайты без оглядки на былые стереотипы и ограничения.

CSS Magic #5. Как сделать изображение в виде параллелограмма?

HTML/CSS 20 мая 20192 min

Привет! Сегодня (да и в дальнейшем) будет нестандартная статья по CSS Magic. Сегодня не будет супер крутых эффектов по наведению и прочего. Просто рассмотрим одну из замечательных возможностей css transform. Поехали!

Итак, чтобы сделать блок в виде параллелограмма — нужно использовать transform: skew(). Рассмотрим на примере:

HTML

<div>
<img src="https://imgcomfort.com/Userfiles/Upload/images/illustration-geiranger.jpg" alt="">
</div>

Имеем обычный блок с классом image и внутри картинку (т.к. просто делать текст внутри параллелограмма не так интересно).

CSS (SCSS)

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.image {
position: relative;
z-index: 12;
overflow: hidden;
border-radius: 10px;
width: 605px;
height: 282px;
transform: skewX(-30deg);
transition: all 0.15s;
img {
position: absolute;
left: 50%;
width: 130%;
height: 100%;
object-fit: cover;
transform: skewX(30deg) translateX(-50%);
}
}

Написал код в scss, так как сейчас чаще всего пишу на нем и так быстрее. Собственно, создаем блок, даем ему размеры, border-radius (опционально) и overflow: hidden (опционально). Последнее нужно, чтобы наша картинка за пределы блока не выходила. Ну и конечно же, ставим transform: skewX(-30deg). skewX означает что смещение будем делать только по оси X.

Далее картинка. transform: skew по умолчанию так же смещает все элементы внутри себя. Поэтому, если мы не хотим скошенную картинку, нам нужно вернуть ее назад. Просто пишем обратный transform: skewX(30deg). Важно, что не 0, а именно противоположное по знаку значение, чем у родителя.

Картинку так же делаем абсолютной, высоту в 100%, а дальше интересный момент. Ширина у нас 130%, т.к. картинка при обратном изменении transform станет квадратной и в углы параллелограмма не попадет. Ее приходится расширять, чтобы она заняла больше пространства (но overflow у родителя как раз не даст нам увидеть это расширение). Ну и конечно, нужно задать object-fit: cover (для тех, кто очень хочет поддерживать ie 11, такой метод, конечно, не подойдет. Но мы идем в ногу со временем и не обращаем внимания на ie).

Вот собственно и все. Вы в принципе можете любой контент вставить внутрь параллелограмма (текст, видео и т.д.), но не забудьте, что обязательно нужно «вернуть» его в обратное положение. Кстати, на scss вы можете изначально задать переменную $degrees: 30deg, и просто ставить transform: skewX(-$degrees)и transform:skewX($degrees)`. Очень удобно)

Пен:

Спасибо Вам, что читаете, и успехов в применении transform: skew()!

Об авторе блога

MaxGraph

Автор. Веб-разработчик. Фрилансер. Преподаватель в онлайн-университете.

Портфолио: https://maxgraph.ru/
Добавляйтесь в друзья VK! Каждому добавившемуся и написавшему в личку «хочу полезность» — подарю набор крутых ссылок для верстальщика.

CSS свойство border-image | назначение, допустимые значения, примеры

Свойство border-image — сокращенный способ задать свойства границы border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat, позволяет одновременно задать фоновое изображение границы элемента, разбить его на фрагменты, указать размер контура и его способность выходить за пределы границы элемента, а также указать способ отображения боковых фрагментов и центра фонового изображения.

Допустимые значения

Значение по умолчанию	не определяется для составных свойств
Применимо	ко всем элементам, кроме табличных элементов для которых свойство border-collapse имеет значение ‘collapse’.
Наследование	нет
Версия CSS	CSS 3
Поддерживается браузерами

Пример

.block {
border-image: (http://www.mpbox.ru/assets/images/logo.jpg) 13 1 9 13 / 10px 1px 6px 10px / 3px 0 3px 3px stretch round;
}

Твой код:

<html> <head> <title></title> <style type=»text/css»> <!— .block { width: 80%; height: 100%; color: #000; border: 13px solid #ff0; border-image: url(http://www.mpbox.ru/assets/images/css-spravochnik/demo2.gif) 13 1 9 13 stretch round; } —> </style> </head> <body> <div> блок с границей из изображения (на момент выхода статьи полностью свойство border-image не поддерживается браузерами, а частично поддерживается только Opera 10. 5 и выше). </div> </body> </html>Сделай код и жми тут

Результат:

большой полигон

Заметки

Это свойство относится к CSS3 модулю CSS Backgrounds and Borders Module Level 3 — кандидата в рекомендацию W3C с 17 декабря 2009 года.

Safari 3 и выше и Chrome 1 и выше поддерживают аналогичное свойство -webkit-border-image, а Firefox 1.0 и выше -moz-border-image. Единственное отличие — это невозможность указать необязательный параметр border-image-outset, а также непрозрачная середина рисунка.

Частично поддерживает свойство border-image Opera 10.5 и выше. Реализована поддержка только обязательных параметров. При этом значение border-image-width будет равно border-width, а центральная часть рисунка будет видимой и будет повторяться или растягиваться в зависимости от отображения боковых сторон.

Свойство border-image-outset Свойство border-color

CSS.

Border-image, о котором вы, возможно, не знали

Свойство border-image существует в css3 уже довольно давно, но пользоваться им, как ни странно, или не привыкли, или не пробовали очень многие. Давайте это исправим и познакомимся с border-image поближе.

Описание свойства border-image состоит из трех частей:

border-image: url(border-image.png) 25% repeat;

Это позволяет специфицировать следующее:

1. Непосредственно изображение, которое будет использовано в border’е
2. Где нарезать это изображение
3. Каким образом браузер будет использовать эти секции при рендере

Давайте рассмотрим каждую секцию более подробно. Первая часть легка для понимания, она знакома по свойству background-image. Для демонстрации остального будем использовать следующее изображение 100×100 пикселей:

Вторая часть выражения может иметь от одного до четырех значений, почти как border-width, а специфицируются они в следующем порядке:

В качестве единиц измерения можно использовать проценты или пиксели. При этом есть интересная особенность, для описания в процентах обязательно использовать знак «%», в то время как для пикселей обозначение «px» не обязательно.

border-image: url(my-image.gif) 25% 30% 10% 20% repeat;

border-image: url(my-image.gif) 25 30 10 20 repeat;

Как мы уже установили, размеры изображения 100×100 пикселей, так что в обоих случаях выше оно будет нарезано в одних и тех же местах. Для лучшего понимания, посмотрите на изображение с наглядными замерами:

border-image всегда определяет заданное изображение в соответствующие углы контейнера, а третья часть выражения, в нашем случае, объясняет браузеру как обходиться со средней секцией.

Возможные свойства repeat (повторять) и stretch (растянуть) – говорят сами за себя.

Свойство round – своего рода комбинация repeat и stretch – означает, что изображение будет повторяться целое количество раз, а остаток пространства будет заполнен за счет растягивания этих кусочков.

element {
  border-width: 25px 30px 10px 20px;
  border-image: url("border-image.png") 25 30 10 20 repeat stretch;
}

В этом примере для top/bottom установлено значение repeat, а для left/right – stretch.

border-image не будет делать ничего, если не установить значение для border-width, то есть срез изображения будет масштабироваться на заданную ширину. Если при этом использовать свойство border, то можно подстраховаться для браузеров, которые не поддерживают в полной мере css3 и свойство border-image:

element {
  border: 50px double orange;
  border-image: url("border-image.png") 25 30 10 20 repeat;
}

Так же можно специфицировать ширину для каждого border’а:

element {
  border-color: orange;
  border-style: double;
  border-width: 25px 30px 10px 20px;
  border-image: url("border-image.png") 25 30 10 20 repeat;
}

Предсказуемо, в наши дни с border-image у вас возникнут проблемы только в IE. Однако, чтобы предупредить некоторые проблемы со средней частью border’а, следует определять свойство border-image-slice со значением fill: по умолчанию, средняя часть border-imgae, может отбрасываться, border-image-slice: fill позволяет этого избежать (см. спецификацию)

Скрытые возможности CSS: 10 полезных советов

21 совет профессионалов в CSS

изображений границы CSS

---

Изображения границ CSS

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

---

CSS border-image Свойство

Свойство CSS border-image позволяет указать изображение, которое будет использоваться вместо обычной границы вокруг элемента.

Имущество состоит из трех частей:

1. Изображение для использования в качестве границы
2. Где нарезать изображение
3. Определите, должны ли средние части повторяться или растягиваться

Мы будем использовать следующее изображение (названное «border.png «):

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

Примечание: Чтобы border-image работал, элемент также нуждается в бордюр набор свойств!

Здесь средние части изображения повторяются для создания границы:

Изображение в виде рамки!

Вот код:

Пример

#borderimg {
граница: сплошная прозрачная 10 пикселей;
отступ: 15 пикселей;
border-image: url (border.png) 30 тур;
}

Попробуй сам »

Здесь средние части изображения растягиваются для создания границы:

Изображение в виде рамки!

Вот код:

Пример

#borderimg {
граница: сплошная прозрачная 10 пикселей;
отступ: 15 пикселей;
изображение границы: url (border.png) 30 стрейч;
}

Попробуй сам »

Совет: Свойство border-image на самом деле является сокращенным свойством для border-image-source , border-image-slice , ширина-границы-изображения , граница-изображение-исход и border-image-repeat свойств.

---

---

CSS border-image — разные значения фрагментов

Различные значения среза полностью меняют внешний вид границы:

Пример 1:

border-image: url (border.png) 50 раунд;

Пример 2:

border-image: url (border.png) 20% круглое;

Пример 3:

border-image: url (border.png) 30% округление;

Вот код:

Пример

# borderimg1 {
граница: 10 пикселей сплошная прозрачная;
отступ: 15 пикселей;
border-image: url (border.png) 50 раунд;
}

# borderimg2 {
граница: сплошная прозрачная 10 пикселей;
отступ: 15 пикселей;
граница-изображение: url (border.png) 20% округление;
}

# borderimg3 {
граница: 10 пикселей сплошная прозрачная;
отступ: 15 пикселей;
изображение границы: url (border.png) 30% круглый;
}

Попробуй сам »

---

Проверьте себя упражнениями!

---

Свойства изображения границы CSS

Как добавить рамку или границу вокруг изображения с помощью CSS

Розовая роза

Иногда при создании веб-страницы требуется, чтобы изображение выглядело так, как будто оно имеет рамку, как фотография, но без использования графической программы, такой как Photoshop или Fireworks.Это легко сделать с помощью CSS (каскадных таблиц стилей) для форматирования изображения, как на фотографии, показанной здесь.

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

Рамка изображения с цветным фоном

Сначала вам нужно настроить класс в файле CSS для фрейма.Я назвал этот класс imgframe, но вы можете называть его как хотите. Я установил этот на розовом фоне (того же цвета, что и роза). Вы можете использовать функцию пипетки в своей графической программе, чтобы выбрать шестнадцатеричный цветовой код. Затем я добавил отступ в 12 пикселей и серую границу в 1 пиксель, но изменил их в соответствии с вашими потребностями. Добавьте это в свой файл CSS:

.imgframe
{фон: # D652D9;
отступ: 12 пикселей;
граница: сплошная 1px # 999; }

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

Добавьте этот класс imgframe в свой тег изображения в html файле:

В результате должно получиться изображение с рамкой или тонкой рамкой, как показано ниже:

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

Изображение в рамке с прозрачным фоном

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

.img-frame {
фон: прозрачный;
отступ: 8 пикселей;
граница: сплошная 1px # 999999; }

Добавьте этот класс (img-frame) в свой тег изображения в html файле:

В результате должно получиться изображение с прозрачной рамкой, например:

Как добавить тень под рамкой изображения или рамкой

Если вы хотите добавить тень, добавьте в ваш файл css следующее:

box-shadow: 5px 5px 5px # 999;

Поскольку изображение является встроенным элементом, нам нужно будет добавить display: block; классу изображения в CSS, иначе под рамкой или границей изображения будет пробел, но перед тенью.Итак, теперь ваш файл CSS должен иметь следующее:

.img-frame {
дисплей: блок;
фон: прозрачный;
отступ: 8 пикселей;
граница: сплошная 1px #ccc;
box-shadow: 5px 5px 5px # 999; }

Теперь у вашего изображения должна быть тень справа и снизу за пределами кадра, например:

Для получения дополнительной информации о падающих тенях см. Страницу CSS Drop Shadows.

Как вставить изображение в рамку с подписью

Чтобы добавить подпись к изображению, добавьте в файл CSS следующее:

.img-frame-cap {
width: 200px;
фон: #fff;
отступ: 18px 18px 2px 18px;
граница: сплошная 1px # 999; }

Добавьте этот класс в div, окружающий изображение в html-файле: