Красивая рамка css – CSS3-рамка

CSS-рамка

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

Оформление рамок и границ HTML-элементов с помощью CSS-свойств

1. Стиль рамки border-style

По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.

Синтаксис

p {border-style: solid;}
p {border-top-style: solid;}

2. Цвет рамки border-color

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

Синтаксис

p {border-color: #cacd58;}

3. Ширина рамки border-width

Ширина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none, и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется.

Синтаксис

p {border-width: 2px;}

4. Задание рамки одним свойством

Свойство border позволяет объединить в себе следующие свойства: border-width, border-style, border-color, например:

div {
width: 100px; 
height: 100px; 
border: 2px solid grey;
}

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

5. Задание рамки для одной границы элемента

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

Стиль верхней границы задается с помощью свойства border-top, нижней — border-bottom, левой — border-left, правой — border-right.

Синтаксис

p {border-top: 2px solid grey;}

html5book.ru

Рамки в CSS. Рамки вокруг текста и картинки в CSS: примеры.

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

Синтаксис свойства border прост: border: 1px solid black;. Это свойство имеет три значения:

• 1px — толщина границы.
• solid — тип рамки, solid — это сплошная линия, double — двойная сплошная, dashed — пунктиром. Есть ещё несколько типов рамок, информацию про них найдёте тут: CSS border.
• black — устанавливает цвет границы. Цвета можно задавать по названию, допустимые значения находятся тут: таблица цветов CSS, или по шестнадцатеричному коду. Как это сделать напсано в статье: цвета в CSS.

Рамка текста CSS

Вот пример использования свойства border для создания рамки шириной в один пиксел и чёрного цвета:

.example-1
{
	width:   90%;
	padding: 10px;
	margin: 0 auto;
	border: 1px solid black;
}

Этому абзацу присвоен класс example-1.

В этом примере мы также использовали свойство CSS

Давайте рассмотрим ещё один несложный пример, просто чтобы усвоить материал. Создадим рамку шириной три пиксела красного цвета и без внутреннего отступа (свойство CSS padding).

.example-2
{
	width:   90%;
	margin: 0 auto;
	border: 3px solid red;
}

Этому абзацу присвоен класс example-2.

Как мы видим, без внутреннего отступа padding рамка текста выглядит рогато.

Как сделать рамку картинки в CSS

Рамки для картинок задаются аналогично при помощи свойства border. Давайте сделаем рамку зелёного цвета толщиной 4 пикселя для картинки.

.example-img
{
	border: 4px solid green;
}

Вот как сработает этот код:

Как закруглить углы рамки в CSS

Округление углов рамки в CSS делается при помощи свойства

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

.example-3
{
border: 1px solid black;
border-radius: 15px;
padding: 10px;
}

Вот как он работает:

Свойство border-radius: 15px.>

Если у блока нет рамки, то есть граница border-width: 0;, то закруглена будет область залитая фоновым цветом (свойство background-color). Вот пример:

.example-4
{
	border-width: 0;		// хотя это значение равно 0 по умолчанию
	background-color: #DDD;
	border-radius: 15px;
	padding: 10px;
}

Вот как работает этот пример:

Свойство border-radius: 15px.>

Как я писал ранее, для свойства border-radius можно устанавливать от одного до четырёх значений. В таблице ниже описано как будут работать все комбинации значений.

Для свойсва border-radius значения можно указывать в процентах.

Давайте нарисуем круг на CSS. Для этого возьмём кватратный блок 100 на 100 пикселей и округлим углы CSS правилом border-radius: 50%.

.example-5
{
	width: 100px;
	height: 100px;
	background-color: #F00;
	border-radius: 50%;
}

Вот как работает этот пример:

>

На этом тема «рамки в CSS» раскрыта полностью. Успехов в изучении CSS!

komotoz.ru

Рамки html

Здравствуйте уважаемые начинающие веб мастера.

Рамка является одним из самых популярных вариантов оформления контента, и в этой статье мы подробно рассмотрим, как они создаются средствами html.

Рамку можно создать для любого html элемента, будь то <p>, <h2>, <img>, <span>, <blockquote>, <marquee> и так далее.

Разница между рамками блочных и встраиваемых элементов состоит в том, что у блочных рамка образуется на всю ширину блока, но её можно ограничивать.

Рамка же встроенного создаётся непосредственно вокруг элемента, заключённого в тег.

Для создания рамки применяется стилевое свойство border которому задаются три значения по порядку

Толщина Вид Цвет.

Так как руководство это практическое, то перейдём непосредственно к примерам.

Толщина и размер рамки

Для примера возьмём тег <p> и создадим ему простую рамку толщиной 3 px

<p>
текст текст текст текст</p>

Результат

текст текст текст текст

Как видите — рамка заняла всё пространство, которое занимает тег.

Так ведёт себя рамка созданная для блочных элементов, таких как <p>, <div> и т.д.

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

<p>
текст текст текст текст</p>

текст текст текст текст

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

<p>
текст текст текст текст</p>

текст текст текст текст

Рамка для встроенных или строчных элементов, таких как <img>, <span>, <hr> и т.п., располагается непосредственно вокруг элемента.

Бла-бла-бла Бла-бла-бла <span>текст текст текст текст</span> Бла-бла-бла Бла-бла-бла

Бла-бла-бла Бла-бла-бла текст текст текст текст Бла-бла-бла Бла-бла-бла

Вид рамки

Можно изменить вид рамки, для этого в значении меняется её название.

Названия:

solid — сплошная

<span>текст текст текст текст</span>

текст текст текст текст

dotted — точечная

<p>
текст текст текст текст</p>

текст текст текст текст

dashed — пунктирная

<p>
текст текст текст текст</p>

текст текст текст текст

double — двойная

<p>
текст текст текст текст</p>

текст текст текст текст

ridge —  рельефная

<p>
текст текст текст текст</p>

текст текст текст текст

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

Не полная рамка

Для создания неполной рамки в код вместо свойства border вводятся свойства border-top, border-right, border-bottom, border-left, по отдельности или в различных комбинациях, в зависимости от того, какая граница вам нужна.

<p > текст текст текст текст</p>

текст текст текст текст

Выравнивание и отступы рамки

Текст внутри рамки можно выровнять по центру или правому краю, добавив в код свойство text-align, которое принимает значения

left — выравнивание по левому краю (по умолчанию)

center — выравнивание по центру

right — выравнивание по правому краю

<p > текст текст текст текст</p>

текст текст текст текст

Можно задать для рамки отступы от текста.

Для этого в код рамки вводится свойство padding, которое принимает 4 цифровых значения:

первая цифра — отступ сверху;

вторая цифра — отступ справа;

третья цифра — отступ снизу;

четвёртая цифра — отступ слева.

Отступы задаются в любых доступных в веб единицах размеров.

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

Если указать два значения, то первая цифра укажет отступы сверху и снизу, а вторая — справа и слева.

<p > текст текст текст текст</p>

текст текст текст текст

Можно задать отступ от предметов находящихся снаружи рамки.

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

Сделаем отступы слева, сверху и снизу

<p > текст текст текст текст</p>

текст текст текст текст

Дизайн рамки

Можно внутри рамки сделать фоновый цвет.

Для этого в код рамки вводится свойство background, в значении которого указывается код цвета.

<p > текст текст текст текст</p>

текст текст текст текст

Можно вместе с текстом  в рамку вставить картинку. В примере .gif картинка.


<p>
<img src="images/i6.jpg"><br>Текст текст текст текст текст</p>

Текст текст текст

 
А если задать ширину рамки ridge пикселей в 15-20, то есть в свойстве border вместо 3px задать 15px, то получится багет.

Текст текст текст

Так же в дизайне рамки можно использовать стилевые свойства border-radius — закругление и box-shadow — тень.

<p > текст текст текст текст</p>

Текст текст текст

<p > текст текст текст текст</p>

Текст текст текст

Как пишутся рамки в CSS и как делается тень, читайте в статьях Рамки CSS и Как сделать тень для блока.

Желаю творческих успехов.

Перемена
\
Вовочка папе: — Папа, а тебя била когда нибудь твоя мама ?
— Нет, только твоя…

Прямая линия HTML < < < В раздел > > > Кнопка HTML.

Рекомендую: Готовые HTML шаблоны на русском

starper55plys.ru

Как делается в css рамка-картинка? Описываем прием

От автора: Всех приветствую. Наверняка вы знаете о том, что в css можно делать рамку любому элементу. Но знали ли вы, что в качестве рамки может быть не просто сплошной цвет, но и изображение? Сегодня я вам покажу, как делается в css рамка-картинка.

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

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

Неплохо выглядит, да? И хоть пишу я эту статью в августе, впереди осень, а значит рамка вполне себе к месту в нашем случае. Что ж, чтобы попробовать применить нашу рамку к какому-то элементу, нужно его создать, разумеется. Пусть это будет просто несколько абзацев текста.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

<div class = «border»> Сентябрь был очень теплым, даже черезчур теплым. Такое положение вещей не должно нас удивлять, потому что вот уже несколько лет подряд температура на нашей планете стремительно повышается. <p>Еще несколько десятилетий назад такой ситуации не наблюдалось. Например, раньше летние вечера приносили с собой прохладу, а нынче даже вечером порой никуда не денешься от невероятной жары. Такая ситуация происходит по всему миру. Дело в парниковом эффекте, количество углекислого газа на нашей планете увеличивается.</p> </div>

Вот так, пусть это будет блок с двумя абзацами. Рамку мы применим как раз к этому блоку.

.border{ margin: 30px auto; width: 500; border: 50px solid red; border-image: url(leaves.jpg) 50; }

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

Получилось достаточно симпатично. Ну а теперь я вам объясню, что же нужно для такого отображения:

Указать обычную рамку. То есть ширину, тип и цвет, как будто вы задаете обыкновенную рамку. Это очень важно сделать, без этого наша декоративная рамка показываться не будет!

Прописать непосредственно свойство border-image, где указать путь к картинку с рамкой, а также ширину всех сторон рамки. Я указал одинаково со всех сторон – 50. Очень важно записывать просто число, без пикселей. То есть если вы в border-image напишете 50px, то отобразится просто красная рамка, если не укажете размер вообще, то тоже будет некорректное отображение. Очень важно сделать так, как написано в коде.

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

Также есть значение repeat, оно заставляет рисунок границ border-а повторяться. Но из-за этого на концах элемента рисунок в очередной раз может поместиться не полностью. Если же вы хотите вместить целое кол-во повторений, используйте значение round, которое тоже повторяет изображение, но при этом делает так, чтобы в рамке использовались только целые повторения.

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

Вместо примеров я лучше дам вам ссылку на отличный ресурс, где вы можете потренироваться и понять, как же вам использовать декоративные рамки. Вот он — http://border-image.com/.

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

Также хочу отметить, что к декоративной рамке невозможно применить закругление углов. Проще говоря, свойство border-radius никак не влияет на такую рамку. Единственный вариант получить закругленную рамку – найти в интернете такую изначально и уже ее применять к нужным элементам.

Что ж, я надеюсь, сегодняшняя статья вам помогла и теперь вы имеете в своем арсенале еще одну крайней интересную возможность css3 – декоративные рамки. Область их применения достаточно широка. Например, можно обрамлять ими виджеты и использовать для разного рода декоративных элементов. На этом у меня все, до встречи! Кстати, остальные фишки css3 вы можете изучить в нашей серии уроков по этой технологии. Там и градиенты, и закругление углов, и тени. В общем, полный фарш.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

webformyself.com

добавление, управление цветом, шириной и стилем

Рамка представляет собой обычную линию, которая отображается вокруг элемента. Но совсем не обязательно применять рамку, окружающую элемент со всех сторон. Можно добавить ее только с требуемой стороны элемента. Например, если добавить рамку только с нижней стороны блочного элемента, то она будет производить тот же эффект, что и HTML тег <hr>, выступая в качестве разделителя.

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

• border-width — задает ширину рамки. Для установки ширины можно использовать пиксели или ключевые слова: thin, medium, thick.
• border-style — определяет стиль рамки с помощью одного из восьми возможных значений: solid, dotted, dashed, double, groove, ridge, inset и outset.

• border-color — указывает цвет рамки.

Вместо использования всех трех свойств, можно использовать всего одно — CSS свойство border, которое позволяет одновременно задать ширину, стиль и цвет для рамки в одном объявлении:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.one {
        border-style: solid;
        border-width: 5px;
      }
      p.two {
        border-style: solid;
        border-width: medium;
		border-color: red;
      }
      p.three {
        border: 3px dashed #ffffff;
        background-color: #0000FF;
		color: #ffffff;
      }
    </style>
  </head>

  <body>
    <p>Первый абзац.</p>
    <p>Второй абзац.</p>
    <p>Третий абзац.</p>
  </body>
</html>

Для управления рамкой отдельно с каждой стороны элемента, используются соответствующие свойства:

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

С этой темой смотрят:

puzzleweb.ru

Декоративные рамки | htmlbook.ru

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

Предварительно следует подготовить нужную картинку, она представляет собой типовую рамку (рис. 1).

Рис. 1. Изображение для создания рамки

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

Рис. 2. Линия из повторяющихся фрагментов

Теперь необходимо заняться замерами размеров, интересует четыре значения показанных на рис. 3. Это высота верхней границы, ширина правой, высота нижней и ширина левой границы. Размеры указываются в процентах от размера картинки или в пикселах, что проще.

Рис. 3. Размеры границ

В зависимости от рисунка рамки эти значения могут быть равны или различаться меж собой. Для рамки показанной на рис. 1 замеры дали 35px, 34px, 35px, 35px. Справа рамка оказалась на один пиксел меньше, так что по хорошему надо бы его добавить для симметрии, но в данном случае делать этого не буду, чтобы значения различались.

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

Пример 1. Декоративная рамка

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Рамка</title>
  <style>
   .block {
    border: 30px solid #c28b7b; /* IE */
    min-height: 100px;
    padding: 10px;
    -moz-border-image: url(images/border.png) 35 34 35 35 repeat; /* Firefox 4 */
    -webkit-border-image: url(images/border.png) 35 34 35 35 repeat; /* Safari 5 и Chrome */
    -o-border-image: url(images/border.png) 35 34 35 35 repeat; /* Opera 10.5 */
    border-image: url(images/border.png) 35 34 35 35 repeat; /* CSS3 */
   }
  </style>
 </head>
 <body>
  <div>
   Антропосоциология, конечно, категорически осмысляет 
   сенсибельный структурализм, отрицая очевидное.
  </div>
 </body>
</html>

Обратите внимание, что размеры границ указываются без всяких единиц измерения, если по ошибке написать 35px, то пример работать не будет.

Результат примера в браузере Chrome показан на рис. 4.

Рис. 4. Вид рамки для блока

Свойство border-image непосредственно связано с рамкой, поэтому вначале необходимо задать её толщину через border-width или универсальное свойство border. Это к тому же позволяет сразу указать вид рамки для Internet Explorer, который не отображает нашу декоративную рамку.

У border-image есть несколько важных преимуществ и удобных настроек. Такая рамка легко масштабируется и для неё легко задать толщину, всего-навсего указав желаемое значение через border-width. Вдобавок, можно задать разную толщину границ на каждой стороне, если захочется. Для border-width: 10px вид рамки показан на рис. 5.

Рис. 5. Масштабирование рамки

Следующий момент связан со способом повторения границ. Есть три значения, которые дают разный вид рамки: stretch, repeat и round. При stretch граница не повторяется, а растягивается на всю ширину или высоту элемента, что приводит к искажениям картинки, поэтому stretch применяется достаточно редко. При repeat картинка повторяется без всяких искажений, а round повторяет и одновременно масштабирует картинку так, чтобы в отведённое пространство поместилось целое число картинок границы. Поведение round хорошо заметно, если расширять или сужать окно браузера. Два значения, например repeat round задают способ отображения границы по горизонтали и вертикали, а одно — сразу для всех сторон. По умолчанию используется stretch, поэтому если явно не указать алгоритм, то рисунок границы будет растягиваться.

Невозможно заранее сказать, какой способ повторения лучше, это зависит от используемой картинки и размеров элемента. Так что можно только поэкспериментировать с различными значениями и оставить понравившееся. Только надо учесть, что Safari и Chrome не поддерживают значение round, заменяя его на repeat. На рис. 6 показана декоративная рамка в браузере Opera, для которой используется round, а на рис. 7 та же рамка в Chrome.

Рис. 6. Рамка со значением round в Opera

Рис. 7. Рамка со значением round в Chrome

Для такой рамки значение repeat вызывает некрасивое отображение уголков.

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

htmlbook.ru

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

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

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

Демо

Я использовал 3 фотографии и сделал к ним разные рамки. Но перед этим задал им размер и необходимые отступы. Это делается для каждого случая индивидуально. В моем примере это выглядит так:

img {height: 300px; margin-left: 45px; width: 200px;}

img {height: 300px; margin-left: 45px; width: 200px;}

К картинкам я прописал классы. На первом изображении получилась белая рамка размеров 10 пикселей и скругленными углами радиусом 10 пикселей. А так же, для разнообразия, я добавил ко всем изображениям псевдокласс hover, чтобы были видны изменения при наведении курсора и CSS3 тень. Тень кстати, вы сможете увидеть не во всех браузерах. Весь CSS код выглядит вот так:

1
2
3
4
5
6

.one{border: 10px solid #FFF;border-radius: 10px; box-shadow: 2px 3px 8px -2px;}
.one:hover{box-shadow:none; border-color: #adffcc;}
.two{border: 10px solid #333; box-shadow: 0 0 8px 1px;}
.two:hover{border-color:#666; box-shadow:none;}
.three{border: 10px solid #2990FC; border-radius: 10px 0 10px 0; box-shadow: -2px 4px 5px -1px;}
.three:hover{box-shadow:none; opacity:0.8;}

.one{border: 10px solid #FFF;border-radius: 10px; box-shadow: 2px 3px 8px -2px;} .one:hover{box-shadow:none; border-color: #adffcc;} .two{border: 10px solid #333; box-shadow: 0 0 8px 1px;} .two:hover{border-color:#666; box-shadow:none;} .three{border: 10px solid #2990FC; border-radius: 10px 0 10px 0; box-shadow: -2px 4px 5px -1px;} .three:hover{box-shadow:none; opacity:0.8;}

Надеюсь теперь вам понятен принцип создания рамки вокруг изображений в CSS. Обратите внимание, что в третьем изображении загруглены только 2 угла, а 2 остались без изменений. А так же меняется его прозрачность при наведении. Если возникнут вопросы по созданию рамок вокруг изображений, можете задавать их в комментариях. Постараюсь вам помочь. И если вам не трудно, поделитесь этой записью в социальных сетях. Спасибо.

serblog.ru