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

CSS-рамка

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

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

1. Стиль рамки border-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-width, border-style и border-color. Перечень свойств указывается в заданном порядке, при этом одно или два значения могут быть пропущены, в этом случае их значения примут значения по умолчанию.

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

Синтаксис

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

html5book.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

Css красивая рамка. Задание рамки одним свойством. Цвет внешнего контура outline-color

Css красивая рамка. Задание рамки одним свойством. Цвет внешнего контура outline-color

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

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

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

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

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

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

В этом примере мы также использовали свойство CSS padding , или внутренний отступ. Это свойство задаёт размер отступа от текста до обводки (границы элемента).

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

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

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

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

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

Example-img { border: 4px solid green; }

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

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

Округление углов рамки в CSS делается при помощи свойства border-radius . Это свойство появилось в CSS3, и работает во всех современных браузерах.

Свойство 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!

Для управления границей элемента применяется универсальное свойство border . Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента.

Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:

Блок div с рамкой 3px красного цвета.

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

Блок div с разными границами.

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

Подумайте, как при помощи CSS можно создать такую фигуру:

Значения границы — толщину, стиль и цвет — можно задать отдельно используя специальные свойства.

• border-style — стиль границы.
• border-width — ширина границы.
• border-color — цвет границы.

Рассмотрим каждое из значений по отдельности.

Свойство border-style. Стиль границы.

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

1. none — граница отсутствует (по умолчанию).
2. solid — сплошная граница.
3. double — двойная граница.
4. dashed — пунктирная граница.
5. dotted — граница из ряда точек.
6. ridge — граница «гребень».
7. groove — граница «бороздка».
8. inset — вдавленная граница.
9. outset — выдавленная граница.

Примеры того, как они выглядят.

граница отсутствует (none)

сплошная граница (solid)

двойная граница (double)

граница из ряда точек (dotted)

пунктирная граница (dashed)

граница «бороздка» (groove)

граница «гребень» (ridge)

вдавленная граница (inset)

выдавленная граница (outset)

Кстати, если для рамки ridge задать цвет границы чёрный, то получится вот такой результат.

Блок div с рамкой чёрного цвета и стиля ridge.

Рамка выглядит как solid , но это потому что стиль ridge создаётся добавлением чёрного эффекта тени, а чёрный эффект на чёрной рамке не виден.

При помощи свойства border-style стиль границы может быть задан не только для всех сторон блока. Есть возможность задавать несколько значений одному свойству border-style , в зависимости от числа значений стиль границы будет присвоен разному числу сторон блока. Можно задать одно, два, три и четыре значения. Давайте рассмотрим примеры для каждого случая.

Одно значение (solid) — стиль границы установлен для всех сторон блока.

Два значения (solid double) — первое значение установило стиль для верхней и нижней сторон, второе для боковой.

Три значения (solid double dotted) — первое значение для верхней стороны, второе для боковых, стретье для нижней.

Четыре значения (solid double dotted dashed) — каждое значение для одной стороны по часовой стрелке начиная с верхней.

Свойство border-width. Толщина границы.

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

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

Код примера:

Одно значение (2px) — толщина границы установлен для всех сторон блока.

Два значения (1px 5px) — первое значение установило толщину для верхней и нижней сторон, второе для боковой.

Три значения (1px 3px 5px) — первое значение для верхней стороны, второе для боковых, стретье для нижней.

Четыре значения (1px 3px 5px 7px) — каждое значение для одной стороны по часовой стрелке начиная с верхней.

Также для свойства border-width существуют значения в виде ключевых слов. Всего их три:

• thin — тонкая граница;
• medium — средняя толщина;
• thick — толстая граница;

Толщина границы: thin.

Толщина границы: medium.

Толщина границы: thick.

Свойство border-color. Цвет границы.

Для управления цветом границы используется средство border-color . Цвета для этого свойства можно задать используя любой способ, описанный в статье «Цвета в CSS «, а именно:

• Шестнадцатеричная запись (#ff00aa ) цвета.
• Формат RGB — rgb(255,12,110) . Формат RGBA для CSS3.
• Форматы HSL и HSLA для CSS3.
• Название цвета, например black (чёрный). Полный список названий цветов приведён в таблице названий цветов CSS .

Свойство border-color также может иметь от одного до четырёх значений и обрабатывает их аналогично предыдущим свойствам.

Одно значение (red).

Два значения (red black).

Три значения (red black yellow).

Четыре значения (red black yellow blue).

Теперь вернёмся к задаче, озвученной выше, и нарисуем фигуру:

Вот код, который рисует такую фигуру, только побольше размером:

Установка зна

www.nexxdigital.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

Рамки в 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 padding, или внутренний отступ. Это свойство задаёт размер отступа от текста до обводки (границы элемента).

Давайте рассмотрим ещё один несложный пример, просто чтобы усвоить материал. Создадим рамку шириной три пиксела красного цвета и без внутреннего отступа (свойство 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. Это свойство появилось в CSS3, и работает во всех современных браузерах.

Свойство 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 тег <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

Примеры красивая рамка абзаца в html css. Двойная рамка с использованием CSS

Здравствуйте, уважаемые друзья и гости блога! Сегодня продолжаем с вами знакомится с элементами сайтостроения и давайте научимся создавать рамки css. В прошлой своей статье я вам рассказал и показал, как создаются , но рамки css смотрятся более красивее и привлекательнее. Поэтому кто научился делать рамки html, тот и осилит создание рамки css. А я вам в этом помогу! Давайте приступим…

Как самому сделать рамки css для сайта?

Как я вам уже выше сказал, что рамки css намного красивее и практичнее, чем рамки html и вам никакого труда не составит создать такие рамки css самостоятельно, если Вы уже научились делать рамки html.

Что нам потребуется, чтобы сделать рамки css? Ничего заоблачного! Ваше желание и моя статья, в которой я вам все подробно объясню.

Вот ее код:

Наши рамки css!

Вот второй пример рамки css:

Вот ее код:

Наши рамки css!

Вот третий пример рамки из точек:

Это ее код:

Наши рамки css!

Это четвертый пример рамки с двойным обводом:

Вот это ее код:

Наши рамки css!

А если применить значение «ridge», то вот какая рамка получится:

Вот ее код:

Наши рамки css!

Теперь давайте с вами сделаем закругленные края нашей рамки css с помощью вот этих вот значений «border-radius» и «box-shadow»:

Вот рамка с круглыми краями и ее код:

Наши рамки css!

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

Вот ее код:

Наши рамки css!

Теперь делаем рамку с разноцветными контурами, просто добавим в значение «box-shadow» несколько цветовых гамм:

Вот ее код:

Наши рамки css!

А теперь апогей наших рамок на css — это круглая рамка. Делается также просто изменив значение «border-radius». Вот смотрите:

Вот и ее код здесь:

Наши рамки css!

Ну вот и все на сегодня. До новых встреч!

Если вам понравился материал пожалуйста сделайте следующее…

1. Поставьте «лайк».

1. Сделайте ретвит.

1. Поделитесь этим постом с друзьями в социальных сетях.

Спасибо за внимание!

Свойство CSS border слажит для создания границы объекта, а именно за толщину рамки, за ее цвет и стиль. Это свойство широко используется в HTML. Можно создавать различные эффекты для лучшего восприятия контента на странице. Например, оформить сайдбар, шапку сайта, меню и т.п.

1. Синтаксис CSS border

border : border-width border-style border-color | inherit ;

• border-width — толщина рамки. Можно задавать в пикселях (px) или воспользоваться стандартными значениями thin, medium, thick (они отличаются только шириной в пикселях)
• border-style — стиль выводимой рамки. Может принимать следующие значения
  • none или hidden — отменяет границу
  • dotted — рамка из точек
  • dashed — рамка из тире
  • solid — простая линия (применяется чаще всего)
  • double — двойная рамка
  • groove — рифленая 3D граница
  • ridge , inset , outset — различные 3D эффекты рамки
  • inherit — применяется значение родительского элемента
• border-color — цвет рамки. Можно задавать с помощью конкретного названия цвета или в формате RGB (см. названия html цветов для сайта)

Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность «толщина стиль цвет».

2. Примеры с различными границами рамок CSS border

2.1. Пример. Разные стили оформления границы рамки border-style

border-style: dashed

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

2.2. Пример. Изменения цвета рамки при наведении курсора мыши

Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).

При наведении курсора мыши на блок цвет рамки изменится

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

2.3. Пример. Как сделать прозр

girlsgameland.ru