Die CSS-Rahmeneigenschaft aliasiert, um den Rahmen eines Objekts zu erstellen, nämlich die Dicke des Rahmens, seine Farbe und seinen Stil. Diese Eigenschaft wird häufig in HTML verwendet. Sie können verschiedene Effekte erstellen, um den Inhalt der Seite besser wahrzunehmen. Entwerfen Sie beispielsweise eine Seitenleiste, einen Website-Header, ein Menü usw.

1. CSS-Rahmensyntax

rand: randbreite Randstil Randfarbe | erben;

• randbreite - Randdicke. Sie können es in Pixel (px) einstellen oder die Standardwerte für dünn, mittel und dick verwenden (sie unterscheiden sich nur in der Breite in Pixel).
• rahmenstil - Der Stil des gerenderten Rahmens. Kann die folgenden Werte annehmen
  • keine oder versteckt - hebt die Grenze auf
  • gepunkteter - gepunkteter Rahmen
  • gestrichelt - Strichrahmen
  • durchgezogene - einfache Linie (am häufigsten verwendet)
  • doppel - Doppelrand
  • rille - 3D gerillter Rand
  • grat, Einschub, Anfang - verschiedene 3D-Rahmeneffekte
  • erben - Der Wert des übergeordneten Elements wird angewendet
• randfarbe - Randfarbe. Kann mit einem bestimmten Farbnamen oder im RGB-Format eingestellt werden (siehe HTML-Farbnamen für die Site)

Die Werte in der CSS-Randeigenschaft können in beliebiger Reihenfolge angegeben werden. Die am häufigsten verwendete Sequenz ist "Farbe im Dickenstil".

2. Beispiele mit unterschiedlichen CSS-Rahmen

2.1. Beispiel. Verschiedene Arten der Bordürendekoration

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. Пример. Как сделать прозрачную рамку border

Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)

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

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

Задает толщину линии. Ранее мы задавали ее в едином описании border.

Синтаксис CSS border-width

border-width : thin | medium | thick | значение ;

• thin - тонкая толщина линии
• medium - средняя толщина линии
• thick - толстая толщина линии

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

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

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

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

4. Как сделать рамку border только с одного края (границы)

У свойства CSS border есть производные свойства для задания односторонних границ у элемента:

• border-top - для задания рамки сверху (верхняя граница)
• border-bottom - для задания рамки снизу (нижняя граница)
• border-right - для задания рамки справа (правая граница)
• border-left - для задания рамки слева (левая граница)

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

Также есть свойства

• border-top-color - задание цвета верхний границы
• border-top-style - задание стиля верхней границы
• border-top-width - задание толщины верхней границы
• и т.д. для каждого направления

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

/* Описание двух одинаковых стилей: */

4.1. Пример. Красивая рамка для выделения цитат

Пример рамки для цитаты

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

Пример рамки для цитаты

Примечание
Можно задать отдельную границу для каждой из сторон.

5. Как сделать несколько границ border у элемента html

Иногда требуется сделать несколько границ. Приведем пример

5.1. Первый вариант с несколькими границами

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

Есть второй способ через наложение теней.

5.2. Наложение теней для создания нескольких границ

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

6. Скругление углов у границ (border-radius)

Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например

7. Вдавленная линия CSS

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

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

Для обращения к border из JavaScript нужно писать следующую конструкцию:

document.getElementById("elementID").style.border ="VALUE "

Михаил 2016-06-11 1 HTML и CSS 0

Как делается в css двойная рамка?

Всем привет. А вы знаете, как делать в css двойную рамку? Если нет, то прошу ознакомиться с этой небольшой заметкой. Дело в том, что это не сделаешь с помощью обычного border , тут нужно идти другим путем.

Если вы задаете рамку с помощью свойства border , то можете задать ее только одну. Но очень часто по дизайну может требоваться несколько рамок. В таком случае стоит воспользоваться псевдорамкой — тенью.

Двойная рамка с помощью box-shadow

Вообще если вы хотите подробнее изучить тень в css, то советую вам прочитать на соответствующую тему. В этой статье я не буду подробно объяснять синтаксис свойства, а просто покажу прием, как создать двойную рамку. Итак, создам обыкновенный блок, которому пропишу некоторые стили. Блок может быть любым и с любым содержимым. В моем случае это простой div, поэтому html код я даже не буду показывать. А вот стили:

Div{
background: #E0D8A3;
width: 180px;
height: 110px;
padding: 12px;
}

Ну типичный пример оформления блока.
Теперь создадим двойную рамку с помощью множественных теней. Добавлю в стили к блоку еще такое свойство:

Box-shadow: 0 0 0 1px #000, 0 0 0 10px #E0D8A3;

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

Как видите, получилось достаточно симпатично. В box-shadow всего 5 параметров. Первый — смещение тени по горизонтали, второй — по вертикали. Третий и четвертый параметры — размытие и растяжение. Как видите, первые три мы не трогаем вообще. Размытие нам не нужно, потому что нам нужна резкая тень. Как видите, я прописывал четвертый параметр — растяжение. Он определяет, насколько тень будет больше элемента, к которому привязана.

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

Как видите, я просто перечислил параметры для каждой новой тени через запятую. Я думаю, вы уже догадались, что таким же способом можно создать тройную рамку и т.д. Никаких ограничений тут нет. Собственно, как по мне вопрос закрыт, а если у вас есть какие-то вопросы, вы можете писать их в комментарии.

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

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

И так, давайте предположим, что вокруг какого-то элемента нужно сделать рамку. Например, создадим заголовок и вокруг него сделаем рамку.

Параметры характеризующие рамку: 1) Толщина рамки, 2) Стиль рамки и 3) Цвет рамки. И давайте по порядку:

• 1. Толщина рамки: border-width:2px ;
• 2. Стиль рамки: border-style:solid ;
• 3. Цвет рамки: border-color:#ff0000 ;

Какие бывают стили рамок в CSS ? Ниже приведены все доступные стили рамок:

• dotted - Это точечная рамка.
• dashed - Это пунктирная рамка
• solid - Это сплошная рамка
• double - Это двойная рамка
• groove - Объемный вид
• ridge - Объемный вид
• inset - Объемный вид
• outset - Объемный вид

Теперь у нас есть все, чтобы создать рамку вокруг заголовка.

HTML

Создание рамки вокруг заголовка.

И сам стиль для рамки.

H2{ border-width: 2px; border-style: solid; border-color: #FF0000; }

В результате вокруг созданного заголовка появилась сплошная рамка красного цвета толщиной в 2px.

Рамка формируется из четырех сторон: Верхней , Правой , Нижней и Левой и, так как у нас указанно свойство border , то браузер по умолчанию рисует все четыре стороны рамки. Таким образом, если требуется задать рамку только с какой-то одной стороны, то используются приставки указывающие сторону, где создать рамку.

• top - Верх.
• right - Право
• bottom - Низ
• left - Лево

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

H2{ border-bottom-width: 2px; border-bottom-style: double; border-bottom-color: #FF0000; }

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

H2{ border-bottom-width: 2px; border-bottom-style: double; border-bottom-color: #FF0000; border-top-width: 2px; border-top-style: double; border-top-color: #FF0000; }

Теперь заголовок будет обводится красной рамкой сверху и снизу. Аналогично можно сделать и для других сторон.

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

На картинке выше представлена структура сокращённой записи, где указывается свойство border и в качестве значений, через пробел, указывается ширина рамки - border-width , стиль рамки - border-style и цвет рамки - #ff0000 .

То есть браузер, увидев такую, сокращенную запись border:2px solid #ff0000 ; , так же создаст рамку со всех четырех сторон заголовка. Вот такая короткая запись эквивалентна той записи, что мы использовали выше (где применялось три свойства).

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

H2{ border-top:2px solid #ff0000; }

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

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

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

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

Толщина рамки определяется свойством border-width , которое может иметь значения thin, medium и thick, или числовое значение в пикселах. На рисунке показана эта система:

Цвет рамки

Свойство border-color определяет цвет рамки. Значения - нормальные значения цвета, например: "#123456", "rgb(123,123,123)" или "yellow" .

Типы рамок

Существуют различные типы рамок. Ниже показаны восемь типов рамки и их интерпретация в Internet Explorer 5.5. Все примеры показаны цветом "gold" и толщиной "thick", но могут, естественно, выводиться другим цветом и толщиной.

Значения none или hidden могут использоваться, если вы не хотите отображать рамку.

Примеры определения рамок

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

,

,

и

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

H1 { border-width: thick; border-style: dotted; border-color: gold; } h2 { border-width: 20px; border-style: outset; border-color: red; } p { border-width: 1px; border-style: dashed; border-color: blue; } ul { border-width: thin; border-style: solid; border-color: orange; }

Можно также установить специальные свойства для верхнего, нижнего, правого и левого края рамки. Вот как это делается:

H1 { border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; border-right-width: thick; border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange; }

Сокращённая запись

Как и для многих других свойств, вы можете объединить несколько свойств в одно, используя слово border. Пример:

P { border-width: 1px; border-style: solid; border-color: blue; }

можно объединить в:

P { border: 1px solid blue; }

Резюме

В этом уроке вы познакомились с безграничными возможностями CSS при использовании рамок.

В следующем уроке мы рассмотрим, как определять размеры в боксовой модели - height и width.

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

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

Ein Div mit einem 3px roten Rand.

Sie können einen Rahmenstil nur auf einer Seite eines Elements angeben. Verwenden Sie dazu die Eigenschaften border-top (oberer Rand), border-right (rechter Rand), border-bottom (unterer Rand), border-left (linker Rand).

Div Block mit verschiedenen Rändern.

In diesem Beispiel hat jede Seite des Felds eine andere Randstärke, einen anderen Stil und eine andere Farbe.

Überlegen Sie, wie Sie mit CSS eine solche Form erstellen können:

Randwerte - Dicke, Stil und Farbe - können mithilfe spezieller Eigenschaften separat festgelegt werden.

• rahmenstil - der Stil der Grenze.
• rahmenbreite - Die Breite des Rahmens.
• randfarbe - Randfarbe.

Betrachten wir jeden der Werte separat.

Die Eigenschaft im Rahmenstil. Randstil.

Die Eigenschaft border-style legt den Stil des Rahmens fest. In CSS kann der Rand eines Elements im Gegensatz zu HTML mehr als nur ein fester Rand sein. Die folgenden Werte gelten für den Rahmenstil:

1. keine - keine Grenze (Standard).
2. fest - fester Rand.
3. doppel - Doppelrand.
4. gestrichelt - gestrichelter Rand.
5. gepunktet ist eine Linie von Punktgrenzen.
6. grat - Gratgrenze.
7. rille - Rillenrand.
8. einschub - eine depressive Grenze.
9. anfang - extrudierte Grenze.

Beispiele, wie sie aussehen.

keine Grenze (keine)




feste Grenze




doppelter Rand (doppelt)




gepunktete Grenze




gestrichelte Grenze




rillenrand




gratgrenze




eingefügter Rand




extrudierte Grenze (Anfang)

Übrigens, wenn Sie die Rahmenfarbe für den Firstrahmen auf Schwarz setzen, erhalten Sie das folgende Ergebnis.

Ein Div mit schwarzem Rand und Gratstil.

Der Rand sieht solide aus, aber das liegt daran, dass der Gratstil durch Hinzufügen eines schwarzen Schlagschatteneffekts erstellt wird und der schwarze Effekt auf dem schwarzen Rand nicht sichtbar ist.

Mit der Eigenschaft border-style kann der Rahmenstil für mehr als nur alle Seiten des Blocks festgelegt werden. Es ist möglich, mehrere Werte für eine Eigenschaft im Rahmenstil festzulegen. Abhängig von der Anzahl der Werte wird der Rahmenstil einer anderen Anzahl von Seiten des Blocks zugewiesen. Sie können einen, zwei, drei und vier Werte einstellen. Schauen wir uns Beispiele für jeden Fall an.

Ein Wert (durchgehend) - Der Rahmenstil wird für alle Seiten des Blocks festgelegt.




Zwei Werte (durchgehend doppelt) - der erste Wert legt den Stil für die Ober- und Unterseite fest, der zweite für die Seite.




Drei Werte (durchgehend doppelt gepunktet) - der erste Wert für die Oberseite, der zweite für die Seite, der dritte für die Unterseite.




Vier Werte (durchgehend doppelt gepunktet gestrichelt) - jeder Wert für eine Seite im Uhrzeigersinn von oben beginnend.

Randbreiteneigenschaft. Randdicke.

Mit der Eigenschaft border-width wird die Rahmenstärke eines Elements festgelegt. Die Randdicke kann in jeder absoluten Maßeinheit angegeben werden, z. B. in Pixeln.

Wie bei der Eigenschaft im Rahmenstil kann auch die Eigenschaft auf ein bis vier Werte festgelegt werden. Schauen wir uns Beispiele für jeden Fall an.





Beispielcode:

Ein Wert (2px) - Randstärke wird für alle Seiten des Blocks festgelegt.


Zwei Werte (1px 5px) - der erste Wert legt die Dicke für die Ober- und Unterseite fest, der zweite für die Seite.


Drei Werte (1px 3px 5px) - der erste Wert für die Oberseite, der zweite für die Seiten und der dritte für die Unterseite.


Vier Werte (1px 3px 5px 7px) - jeder Wert für eine Seite im Uhrzeigersinn von oben beginnend.

Es gibt auch Schlüsselwortwerte für die Eigenschaft border-width. Es gibt drei davon:

• dünn - dünner Rand;
• mittlere - mittlere Dicke;
• dick - dicker Rand;

Randdicke: dünn.




Randdicke: mittel.




Randdicke: dick.

Die Eigenschaft Randfarbe. Randfarbe.

Mit dem Rahmenfarbwerkzeug können Sie die Rahmenfarbe steuern. Die Farben für diese Eigenschaft können mit jeder im Artikel "Farben in CSS" beschriebenen Methode festgelegt werden, nämlich:

• Hexadezimale Notation (# ff00aa) der Farbe.
• RGB-Format - RGB (255, 12, 110). RGBA-Format für CSS3.
• HSL- und HSLA-Formate für CSS3.
• Farbname, z. B. Schwarz. Eine vollständige Liste der Farbnamen finden Sie in der Tabelle mit den CSS-Farbnamen.

Die Rahmenfarben-Eigenschaft kann auch ein bis vier Werte haben und behandelt sie auf die gleiche Weise wie die vorherigen Eigenschaften.

Ein Wert (rot).




Zwei Werte (rot schwarz).




Drei Bedeutungen (rot schwarz gelb).




Vier Bedeutungen (rot schwarz gelb blau).

Kehren wir nun zu dem oben genannten Problem zurück und zeichnen eine Form:

Hier ist der Code, der eine solche Form zeichnet, die nur größer ist:

Werte für Seiten separat einstellen

Wie oben erwähnt, können Sie Rahmeneigenschaftswerte nur für eine Seite eines Blocks angeben. Für diese Zwecke gibt es Eigenschaften:

• rand oben (oberer Rand)
• rand rechts (rechter Rand)
• rand unten (unterer Rand)
• rand links (linker Rand)

Ich möchte Sie daran erinnern, dass alle Eigenschaften drei Werte (Dicke, Stil und Farbe) in beliebiger Reihenfolge haben. Es gibt jedoch Eigenschaften, mit denen Sie die Dicke, Farbe und den Stil für jede Seite separat festlegen können. Das Schreiben dieser Eigenschaften leitet sich aus dem Obigen ab.

Optionen für den oberen Rand (Rand oben).

• border-top-color - Legt die Farbe des oberen Rahmens des Elements fest.
• border-top-width - Legt die Dicke des oberen Randes des Elements fest.
• border-top-style - Legt den Stil des oberen Rahmens eines Elements fest.

Optionen für den rechten Rand (Rand rechts).

• border-right-color - Legt die Farbe des rechten Rahmens eines Elements fest.
• border-right-width - Legt die Breite des rechten Rahmens eines Elements fest.
• border-right-style - Legt den Stil des rechten Rahmens eines Elements fest.

Optionen für den unteren Rand (Rand-unten).

• border-bottom-color - Legt die Farbe des unteren Rahmens des Elements fest.
• border-bottom-width - Legt die Breite des unteren Rahmens des Elements fest.
• border-bottom-style - Legt den Stil des unteren Rahmens eines Elements fest.

Optionen für den linken Rand (Rand links).

• border-left-color - Legt die Farbe des linken Rahmens des Elements fest.
• border-left-width - Legt die Breite des linken Rahmens des Elements fest.
• border-left-style - Legt den Stil des linken Rahmens des Elements fest.

Ein Beispiel für die Verwendung dieser Eigenschaften:

In diesem Beispiel erhält der div zunächst einen 3px-Rand und einen festen Stil auf allen Seiten. Dann:
• definierte die Farbe des oberen Randes mit der Eigenschaft border-top-color neu in rot,
• stellen Sie mit der Eigenschaft border-right-width die Dicke des rechten Rahmens auf 10px ein.
• mit der Eigenschaft border-bottom-style wird der untere Rahmenstil als double neu definiert.
• bei Verwendung der Eigenschaft border-left-color wird der linke Rand auf blau gesetzt.

Randradius-Eigenschaft. Abrunden der Ecken des Randes.

Die Eigenschaft "Randradius" dient zum Abrunden der Ecken der Ränder eines Elements. Diese Eigenschaft wurde in CSS3 eingeführt und funktioniert in allen modernen Browsern mit Ausnahme von Internet Explorer 8 (und älter) ordnungsgemäß.

Die Werte können eine beliebige Zahl sein, die in CSS verwendet wird.

Randradius-Eigenschaft: 15px.

Wenn der Blockrahmen nicht angegeben ist, erfolgt eine Rundung mit dem Hintergrund. Hier ist ein Beispiel für das Runden eines Felds ohne Rand, jedoch mit einer Hintergrundfarbe:

Randradius-Eigenschaft: 15px.

Es gibt Eigenschaften zum individuellen Abrunden jeder Ecke eines Elements. In diesem Beispiel werden alle verwendet:

Rand-oben-links-Radius: 15px; Rand-oben-rechts-Radius: 0; Rand-unten-rechts-Radius: 15px; Rand-unten-links-Radius: 0;

Randradius-Eigenschaft: 15px.

Obwohl dieser Code in einer Deklaration geschrieben werden kann: Rahmenradius: 15px 0 15px 0. Der Punkt ist, dass die Eigenschaft Randradius von einem bis vier Werten festgelegt werden kann. In der folgenden Tabelle sind die Regeln aufgeführt, die für solche Anzeigen gelten.

Wenn Sie diese Tabelle sorgfältig studiert haben, können Sie verstehen, dass die kürzeste Aufzeichnung des erforderlichen Stils wie folgt lautet: Rahmenradius: 15px 0. Nur zwei Werte.

Ein bisschen Übung

Zeichnen einer Zitrone mit CSS.

Hier ist der Code für einen solchen Block:

Margin: 0 auto; / * Platziere den Block in der Mitte * / width: 200px; Höhe: 200px; Hintergrund: # F5F240; Rand: 1px durchgehend # F0D900; Randradius: 10px 150px 30px 150px;

Wir haben bereits die Form gezeichnet:

Lassen wir nun ein Dreieck davon:

Der Dreieckcode lautet wie folgt:

Margin: 0 auto; / * Platziere den Block in der Mitte * / padding: 0px; Breite: 0px; Höhe: 0; Rand: 30px festes Weiß; Rand-Boden-Farbe: rot;