Vlad Merzhevich

Con i CSS, puoi aggiungere un bordo a un elemento in diversi modi. Fondamentalmente, ovviamente, la proprietà border viene utilizzata come la più universale, oltre a outline e, sorprendentemente, box-shadow, il cui compito principale è creare un'ombra. Successivamente, considereremo questi metodi e le loro differenze tra loro.

Struttura del profilo

La proprietà più semplice per la creazione di frame. Ha gli stessi parametri di border, ma differisce significativamente da esso in alcuni dettagli:

• il contorno è disegnato attorno all'elemento (il bordo è all'interno);
• il contorno non influisce sulle dimensioni dell'elemento (il bordo viene aggiunto alla larghezza e all'altezza dell'elemento);
• il contorno può essere impostato solo attorno all'intero elemento, ma non sui singoli lati (il bordo può essere utilizzato per qualsiasi lato o tutto in una volta);
• il contorno non è influenzato dal raggio di arrotondamento impostato dalla proprietà border-radius (il bordo è interessato).

La domanda sorge spontanea: in quali casi è necessario delineare, quando il suo ruolo, nonostante le differenze elencate, è assunto completamente dal confine? Non ci sono così tante situazioni, ma si verificano:

• creazione di complesse cornici multicolori;
• aggiungere un bordo a un elemento quando ci passi sopra con il cursore del mouse;
• nascondere il frame aggiunto automaticamente dal browser per alcuni elementi quando ricevono il focus;
• per un contorno, puoi impostare la distanza dal bordo di un elemento alla cornice utilizzando la proprietà di offset del contorno per creare.

Cornici multicolori

Dovrebbe essere chiaro che il contorno non sostituisce in alcun modo il confine e può benissimo coesistere con esso, come mostrato nell'esempio 1.

Esempio 1. Creazione di una cornice

In questo esempio, viene aggiunto un bordo nero attorno all'elemento, separato dallo sfondo da un bordo bianco (Fig. 1).

Riso. 1. Cornice intorno all'elemento

Cornice durante l'utilizzo: hover

L'aggiunta di un bordo attraverso il bordo aumenta la larghezza dell'elemento, il che è abbastanza evidente quando si combinano border e la pseudo-classe: hover. Ci sono due modi per "vincere" questo. La cosa più semplice è sostituire il bordo con il contorno, che sappiamo non ha effetto sulle dimensioni dell'elemento (esempio 2).

Esempio 2. Inquadratura al passaggio del mouse

il contorno non è sempre adatto, se non altro perché l'arrotondamento degli angoli non lo influenza. Qui è adatto il secondo metodo: aggiungi una cornice invisibile o una cornice che corrisponda al colore di sfondo, quindi modifica i suoi parametri al passaggio del mouse (esempio 3). Quindi non si verificherà alcuno spostamento dell'elemento, poiché la cornice esiste già dall'inizio. Ma ricorda sempre che la larghezza dell'elemento è la somma dei valori di larghezza, bordo a sinistra e bordo a destra. La situazione è simile con l'altezza.

Esempio 3. Inquadratura al passaggio del mouse

Bordo intorno ai campi del modulo

In alcuni browser (Chrome, Safari, versioni recenti di Opera), viene visualizzato un piccolo bordo colorato attorno ai campi del modulo quando vengono attivati ​​(Figura 2). Per rimuoverlo, aggiungi semplicemente il valore none alla proprietà outline negli stili, come mostrato nell'esempio 4.

Riso. 2. Incornicia i campi

Esempio 4. Rimozione del telaio

Cornici tramite box-shadow

Sebbene la proprietà box-shadow abbia lo scopo di aggiungere un'ombra attorno a un elemento, può anche essere utilizzata per creare bordi che non possono essere eseguiti con un bordo o un contorno. Ciò è dovuto al fatto che il numero di ombre può essere illimitato, i cui parametri sono elencati separati da virgole.

Per ottenere la cornice, i primi tre parametri dovrebbero essere impostati a zero, sono responsabili della posizione dell'ombra e della sua sfocatura. Il quarto parametro in questo caso è responsabile dello spessore del bordo e il quinto imposta il colore del bordo. Per il secondo frame, il quarto parametro è uguale alla somma degli spessori dei due frame.

L'esempio 4 mostra come aggiungere due bordi e un bordo a destra utilizzando una proprietà box-shadow.

Esempio 4. Utilizzo di box-shadow

Il risultato di questo esempio è mostrato in Fig. 3.

Riso. 3. Cornici create dalla proprietà box-shadow

La proprietà CSS border crea un alias per creare il bordo di un oggetto, ovvero lo spessore del bordo, il suo colore e lo stile. Questa proprietà è ampiamente utilizzata in HTML. Puoi creare vari effetti per percepire meglio il contenuto della pagina. Ad esempio, progetta una barra laterale, un'intestazione del sito, un menu, ecc.

1. Sintassi del bordo CSS

frontiera: larghezza del bordo stile del bordo colore del bordo | ereditare;

• larghezza del bordo - spessore del bordo. Puoi impostarlo in pixel (px) o utilizzare i valori standard sottile, medio, spesso (differiscono solo per la larghezza in pixel)
• border-style - lo stile del bordo renderizzato. Può assumere i seguenti valori
  • nessuno o nascosto - annulla il confine
  • punteggiato - cornice punteggiata
  • tratteggiata - cornice tratteggiata
  • solido - linea semplice (usata più spesso)
  • doppio - doppio bordo
  • scanalatura - bordo scanalato 3D
  • cresta, inserto, inizio - vari effetti di cornice 3D
  • eredita - viene applicato il valore dell'elemento genitore
• colore del bordo - colore del bordo. Può essere impostato utilizzando un nome di colore specifico o in formato RGB (vedi i nomi dei colori html per il sito)

Nota

I valori nella proprietà del bordo CSS possono essere specificati in qualsiasi ordine. La sequenza più comunemente usata è "colore stile spessore".

2. Esempi con bordi CSS differenti

2.1. Esempio. Diversi stili di decorazione del bordo in stile bordo

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 "

Рамки имеют многообразное применение, например, как декоративный элемент или для отделения двух объектов. 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.

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

Атрибуты стиля border-left-width, border-top-width, border-right-width и border-bottom-width задают толщину, соответственно, левой, верхней, правой и нижней сторон рамки:

border-left-width|border-top-width|border-right-width|

border-bottom-width: thin|medium|thick|<толщина>|inherit

Мы можем указать либо абсолютное или относительное числовое значение толщины рамки, либо одно из предопределенных значений: thin (тонкая), medium (средняя) или thick (толстая). В последнем случае реальная толщина рамки зависит от Web-обозревателя. Значение толщины по умолчанию также зависит от Web-обозревателя, поэтому ее всегда лучше устанавливать явно.

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

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

H1 { border-bottom-width: 5px }

Фактически все заголовки первого уровня окажутся подчеркнутыми.

Атрибут стиля border-width позволяет указать значения толщины сразу для всех сторон рамки:

border-width: <толщина 1> [<толщина 2> [<толщина 3> [<толщина 4>]]]

Если указано одно значение, оно задаст толщину всех сторон рамки.

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

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

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

Пример:

TD, TH { border-width: thin }

Атрибуты стиля border-left-color, border-top-color, border-right-color и border-bottom-color задают цвет, соответственно, левой, верхней, правой и нижней сторон рамки:

border-left-color|border-top-color|border-right-color|
border-bottom-color: transparent|<цвет>|inherit

Значение transparent задает "прозрачный" цвет, сквозь который будет "просвечивать" фон родительского элемента.

ВНИМАНИЕ!

Цвет рамки всегда следует задавать явно - в противном случае она может быть не нарисована.

Пример:

H1 { border-bottom-width: 5px
border-bottom-color: red }

Атрибут стиля border-color позволяет указать цвет сразу для всех сторон рамки:

border-color: <цвет 1> [<цвет 2> [<цвет 3> [<цвет 4>]]]

Он ведет себя так же, как и аналогичный атрибут стиля border-width:

TD, TH { border-width: thin;
border-color: black }

Атрибуты стиля border-left-style, border-top-style, border-right-style и border-bottom-style задают стиль линий, которыми будет нарисована, соответственно, левая, верхняя, правая и нижняя сторона рамки :

border-left-style|border-top-style|border-right-style|

border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|

ridge|inset|outset|inherit

Здесь доступны следующие значения:

None и hidden - рамка отсутствует (обычное поведение);

Dotted - пунктирная линия;

Dashed - штриховая линия;

Solid - сплошная линия;

Double - двойная линия;

Groove - "вдавленная" трехмерная линия;

Ridge - "выпуклая" трехмерная линия;

Inset - трехмерная "выпуклость";

Outset - трехмерное "углубление".

Пример:

H1 { border-bottom-width: 5px
border-bottom-color: red
border-bottom-style: double }

Атрибут стиля border-style позволяет указать стиль сразу для всех сторон рамки:

border-style: <стиль 1> [<стиль 2> [<стиль 3> [<стиль 4>]]]

Он ведет себя так же, как и аналогичные атрибуты стиля border-width и border-color.

Пример:

TD, TH { border-width: thin;
border-color: black;
border-style: dotted }

Атрибуты стиля border-left, border-top, border-right и border-bottom позволяют задать все параметры для, соответственно, левой, верхней, правой и нижней стороны рамки :

border-left|border-top|border-right|border-bottom:

<толщина> <стиль> <цвет> | inherit

Во многих случаях эти атрибуты стиля оказываются предпочтительнее:

H1 { border-bottom: 5px double red }

"Глобальный" атрибут стиля border позволяет задать все параметры сразу для всех сторон рамки:

border: <толщина> <стиль> <цвет> | inherit
TD, TH { border: thin dotted black }

ВНИМАНИЕ!

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

Представление для нашего Web-сайта


Сделаем отступы между контейнерами, формирующими дизайн наших Web-страниц, и между границами этих контейнеров и их содержимым.

Внешний отступ между краями окна Web-обозревателя и содержимым Web-страницы равен нулю. Пусть пространство в окне Web-обозревателя используется максимально полно.

НА ЗАМЕТКУ

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

Внутренние отступы в контейнере с заголовком Web-сайта (cheader) слева и справа - по 20 пикселов. Нам придется отодвинуть текст заголовка от краев окна Web-обозревателя, иначе заголовок будет выглядеть некрасиво.

Внешний отступ между контейнерами с полосой навигации (cnavbar) и с основным содержимым (cmain) - 10 пикселов.

Внутренние отступы у контейнера с основным содержимым (cmain) со всех сторон - по 5 пикселов.

Внутренний отступ у контейнера с основным содержимым (cmain) сверху - 10 пикселов. Так мы отделим его от контейнеров cnavbar и cmain.

Внутренние отступы в контейнере со сведениями об авторских правах (ccopyright) слева и справа - по 20 пикселов. Текст сведений об авторских правах также следует отодвинуть от краев окна Web-обозревателя.

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

Теперь разделим все четыре контейнера рамками.

Контейнер cheader получит рамку с одной нижней стороной.

Контейнер cmain - рамку с одной левой стороной.

Контейнер ccopyright - рамку с одной верхней стороной.

Рамки мы сделаем тонкими и точечными. В качестве цвета зададим для них #B1BEC6 (светло-синий).

В листинге 11.3 приведен исправленный фрагмент CSS-кода таблицы стилей main.css, реализующий выбранные нами параметры отступов и рамок.



Давайте разберем его.

Чтобы убрать отступ между границами окна Web-обозревателя и содержимым Web-страницы, мы использовали атрибут стиля margin. Его мы поместили в стиль переопределения тега и дали ему значение 0 пикселов:

BODY { color: #3B4043;
background-color: #F8F8F8;
font-family: Verdana, Arial, sans-serif;
margin: 0px }

В именованном стиле cheader, привязанном к одноименному контейнеру, мы задали внутренние отступы слева и справа, равные 20 пикселам, и рамку с одной только нижней стороной. Эта рамка отделит данный контейнер от нижележащих:

#cheader { width: 1010px;
padding: 0 20px;
border-bottom: thin dotted #B1BEC6 }

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

В именованном стиле cnavbar мы указали внешний отступ справа 10 пикселов - он визуально отделит контейнер cnavbar от контейнера cmain:

#cnavbar { width: 250px;
height: 570px;
float: left;
margin-right: 10px }

В именованном стиле cmain мы задали внутренние отступы и рамку с одной левой стороной - она отделит контейнер cmain от контейнера cnavbar:

#cmain { width: 760px;
height: 570px;
float: left;
overflow: auto;
padding: 5px;
border-left: thin dotted #B1BEC6 }

В именованном стиле ccopyright мы задаем отступы слева и справа по 20 пикселов, а сверху - 10 пикселов. Кроме того, мы создаем рамку с одной верхней стороной, которая отделит контейнер ccopyright от вышерасположенных "соседей":

#ccopyright { width: 1010px;
clear: both;

padding: 10px 20px 0px 20px;
border-top: thin dotted #B1BEC6 }

Вот и все. Сохраним таблицу стилей main.css и откроем Web-страницу index.htm в Web-обозревателе. Автор не будет приводить здесь иллюстрацию, т. к. созданные нами тонкие рамки на ней практически незаметны. Но на экране компьютера они выглядят весьма эффектно.

Посмотрим теперь на полосу навигации. Невыразительные гиперссылки скучились в верхней части контейнера cnavbar, просто жалко на них смотреть!.. Давайте их сдвинем влево, немного "разредим", создав отступы, и заодно заключим каждую из них в рамки .

Как мы помним, наша полоса навигации представляет собой список, а отдельные ее гиперссылки - пункты данного списка.

Вот необходимые изменения:

Список, формирующий полосу гиперссылок, сдвинуть влево на 30 пикселов. Так мы ликвидируем образовавшееся после удаления маркеров свободное пространство слева, которое смотрится некрасиво.

Внешние отступы у пунктов списка сверху и снизу - 10 пикселов. Так мы отделим гиперссылки друг от друга.

Рамка пунктов списка - тонкая, сплошная, цвет #B1BEC6.

Внутренние отступы пунктов списка: сверху и снизу - по 5 пикселов, слева и справа - по 10 пикселов. Так мы отделим текст пунктов от рамок .

Осталось только соответственно исправить CSS-код таблицы стилей main.css (листинг 11.4).



Рассмотрим их подробнее.

В именованный стиль navbar, привязанный к тегу списка, который формирует полосу навигации, мы добавили отступ слева, равный –30 пикселов. Благодаря этому список сместится влево, заполняя пустое пространство:

#navbar { font-family: Arial, sans-serif;
font-size: 14pt;

text-transform: uppercase;
list-style-type: none;
margin-left: -30px }

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

#navbar LI { padding: 5px 10px;
margin: 10px 0px;
border: thin solid #B1BEC6 }

Сохраним исправленную таблицу стилей и обновим открытую в Web-обозревателе Web-страницу index.htm, нажав клавишу . Стало значительно лучше, не так ли (рис. 11.1)?



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

• - толщина линии один пиксель
• - сплошная линия
• - белый цвет
• - чёрный цвет
• - серый цвет

Сплошная граница элемента

Штриховая граница элемента



Пунктирная граница элемента



Граница элемента двойной линией



Свойство отдельных участков границы



Вдавленная рифленая рамка в объёме



Выпуклая рифленая рамка в объёме



Объемная вдавленная рамка



Объемная выпуклая рамка



Уроки / CSS /

Урок 7. Рамка элемента CSS

Практически на каждом на сайте используется свойство, которое создаёт вокруг элемента рамку. Она нужна либо для кнопок, либо для блоков с текстом. Для создания рамки у элемента в CSS есть два свойства: border и outline. Рассмотрим их.

border

Данное свойство нужно для установки рамки вокруг элемента, указывает на его границу в web-документе, ширина рамки учитывается при расположении элемента. Имеет 3 значения — цвет, толщину и тип рамки.

Синтаксис у свойства border следующий:

border: Ширина Тип Цвет;
Можно выбрать и другой порядок указания значений свойства, но главное через пробел.

Толщину (ширину) рамки нужно указывать в пикселях (px) или процентах (%).
Цвет можно задать либо в формате RGB (Red Green Blue), либо в HTML HEX кода.

Ниже представлены ТИПЫ линий с их названиями:

Как установить рамки у элемента? Делаем следующим образом:

#block {
border:3px solid #0085сс; /* установили линию толщиной 3 пикселя синего цвета */
}

Если Вы хотите установить одну-две-три рамки с определённой стороны , то указываем так:

border-top — рамка сверху;
border-bottom — рамка снизу;
border-left — рамка слева;
border-right — рамка справа;

Block {
border-right: 3px solid #0085cc;
border-bottom: 2px dashed #0085cc;
}

Если Вы хотите убрать рамки элемента в CSS, то пропишите в свойстве border — none

Empty {
border: none; /* у элемента с классом empty не будет рамки */
}

outline

Outline — это свойство, которое нужно для установки внешней рамки элемента.

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

outline: 2px dotted #0085cc; /* рамка 2 пикселя пунктиром синяя*/
Для outline, как и для border, убрать рамки можно прописав none:

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

Предыдущая статья
Урок 6.

Границы элемента.

Отступы и поля в CSS. Что такое margin и padding?Следующая статья
Урок 8. Как установить цвет текста и фон элемента в CSS?

Комментарии к статье (vk.com)

border

Поддержка браузерами

12.0+	4.0+	1.0+	1.0+	3.5+	1.0+

Описание

CSS свойство позволяет одновременно установить ширину, стиль и цвет для границы блока. Граница блока — обычная линия/рамка, которая окружает блок со всех сторон. Стоит учитывать, что при добавлении рамки она будет влиять на общий размер блока.

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

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

Совет: как правило, при использовании рамки требуется добавлять внутренние отступы.

CSS-свойство: border

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

Синтаксис

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

Значения свойства

Пример

C'è del testo qui.

Il risultato di questo esempio in una finestra del browser:



Come impostare il colore, lo stile e la dimensione del bordo nelle caselle.

Nei linguaggi di marcatura, il bordo ( frontiera), hanno solo tabelle, immagini e cornici, in alcuni casi è possibile impostare il colore del bordo e basta.

Attributo del bordo

I fogli di stile a cascata ci offrono più opzioni, ma prima di tutto.

In CSS, possiamo controllare la larghezza del bordo con larghezza del bordo, o per essere più precisi, possiamo controllare lo spessore di ciascun lato separatamente:
bordo-larghezza-superiore- lo spessore del bordo superiore
bordo-larghezza-destra- spessore del bordo destro
bordo-basso-larghezza- lo spessore del bordo inferiore
bordo-larghezza-sinistra- spessore bordo sinistro
Ma ci può essere anche una forma abbreviata:
P (larghezza bordo: in alto a destra in basso a sinistra;)(in alto a destra in basso a sinistra).
La larghezza del cordolo può essere impostata:
cifre DIV (larghezza del bordo: 5px), da zero a infinito, ad es. positivo.
magro- bordo sottile, DIV (larghezza bordo: sottile)
medio- bordo medio, DIV (larghezza bordo: medio)
di spessore- bordo spesso, DIV (larghezza bordo: spesso)
È chiaro con i numeri, ma con questi valori tutto dipende dal browser, ma comunque magro<= medium <= thick .

Possiamo anche controllare il colore del bordo con colore del bordo o per essere più precisi con il colore di ogni lato:
bordo-top-colore colore del bordo superiore;
bordo-colore-destro colore del bordo destro;
bordo-fondo-colore colore del bordo inferiore;
bordo-sinistro-colore il colore del bordo sul lato sinistro.
Il valore del colore è impostato come per colore, cioè. uno dei 16 colori: acqua, nero, blu, fucsia, grigio, verde, lime, bordeaux, navy, oliva, viola, rosso, argento, verde acqua, bianco o giallo, anche i colori possono essere impostati: colore: # 000000, colore: #AF0 , colore: rgb (255,0,0) o colore: rgb (100%, 0%, 0%).
Indipendentemente dallo schema di colori scelto, i browser lo tradurranno comunque colore: rgb (255,0,0)... Per esempio colore: lime = colore: # 00ff00 = colore: # 0F0 = colore: rgb (0%, 100%, 0%), ma per il browser non importa colore: rgb (0,255,0), cioè. calcolerà questo valore.

Se lo spessore e il colore del bordo possono essere controllati dall'HTML, allora lo stile ( stile del bordo) Solo CSS !!!
Lo stile può essere controllato separatamente da ciascun lato:
stile border-top stile del bordo superiore;
stile bordo-destro stile bordo destro;
stile bordo-basso stile del bordo inferiore;
stile bordo-sinistro lo stile del bordo sul lato sinistro.
Ora diamo un'occhiata ai valori di stile:
1)stile bordo: nessuno- Questa è l'impostazione predefinita, simile alla larghezza del bordo: 0.
2)stile bordo: nascosto- Lo stesso, tranne che per le tabelle, che esamineremo più avanti.
3)stile bordo: punteggiato- Bordo punteggiato.
4)stile bordo: tratteggiato- Bordo della linea tratteggiata.
5)stile bordo: solido- Bordo a linea continua, ad es. come nell'HTML.
6)stile bordo: doppio- Bordo a doppia linea continua, qui è necessaria una larghezza del bordo di almeno 3 pixel.
7)stile bordo: groove- Il bordo sembra tagliato nella tela.
8)stile bordo: cresta- Il bordo sembra sporgere dalla tela.
9)stile bordo: inserto- L'intera scatola sembra pressata nella tela.
10)stile bordo: dall'inizio- Opposto al precedente.
Alcuni browser possono ignorare i valori punteggiati, tratteggiati, doppi, scanalati, ridge, inset e outset e restituirli come solidi, ad es. il solito confine

Tutto ovviamente è così, ma tutti gli esempi sopra sono solo un principio di funzionamento, non un meccanismo.
Proprietà della regola frontiera implica (bordo: dimensione stile colore;), questa regola viene eseguita se tutti e tre i valori sono presenti e solo in questo ordine, ad esempio H1 (bordo: 5px doppio rosso;), ma potrebbero esserci delle eccezioni se questi valori sono forniti da linguaggi di markup, ad esempio per una tabella TABELLA (bordo: 2px), cioè. viene specificato un solo valore.

Per gestire non l'intero cordolo, ma ogni parte separatamente, ci sono regole:
(bordo in alto: colore stile taglia;) Controllo marciapiede superiore;
(bordo a destra: colore stile taglia;) Controllo marciapiede a destra;
(bordo in basso: colore stile taglia;) Controllo marciapiede inferiore;
(bordo sinistro: colore stile taglia;) Controllo del marciapiede a sinistra.
Queste regole possono essere utilizzate separatamente o tutte insieme.

L'eccezione è questa regola:
H1 (
bordo: 4px verde pieno;
}
Il fatto è che in CSS l'ultima regola ha la priorità più alta, in questo caso la proprietà border contiene border-left e quindi la regola border-left verrà ignorata, proprio così:
H1 (
bordo: 4px verde pieno;
bordo sinistro: 2px doppio rosso;
}
Fin dall'inizio, stabiliamo le regole per l'intero cordolo e quindi per le singole aree.

Ho tutto sui bordi per gli elementi, tranne che prenderemo in considerazione alcune proprietà quando arriveremo alle tabelle e ad altre eccezioni.

CSS: confine. I limiti dell'elemento.

Bordi CSS3

Bordi CSS3

Con CSS3 puoi creare bordi arrotondati, aggiungere ombre ai contenitori e utilizzare un'immagine come bordo, senza utilizzare un programma di progettazione come Photoshop.

In questo tutorial imparerai le seguenti proprietà del bordo:

• raggio di confine
• scatola-ombra
• immagine-confine

Supporto browser

Proprietà	Supporto browser
raggio di confine
scatola-ombra
immagine-confine

Internet Explorer 9 supporta alcune delle nuove proprietà del bordo.

Firefox richiede il prefisso -moz- per border-image.

Chrome e Safari richiedono il prefisso -webkit- per border-image.

Opera richiede il prefisso -o- per border-image.

Safari richiede anche il prefisso -webkit- per box-shadow.

Opera supporta nuove proprietà dei bordi.

CSS3 Angoli Arrotondati

L'aggiunta di angoli arrotondati ai CSS2 è stata complicata. Abbiamo dovuto usare immagini diverse per ogni angolo.

In CSS3, creare angoli arrotondati è facile.

In CSS3, la proprietà border-radius viene utilizzata per creare angoli arrotondati:

Questo blocco ha gli angoli arrotondati!

CSS3 Box Shadow

Nei CSS3, la proprietà box-shadow viene utilizzata per aggiungere ombre ai contenitori:

CSS3 Border-Immagine

Con la proprietà border-image CSS3, puoi usare un'immagine per creare un bordo:

La proprietà border-image ti permette di specificare un border-image!

L'immagine originale utilizzata per creare il bordo è tua:

Nuove proprietà del bordo



Attributo del bordo

Attributo del bordo, tag

, utilizzato per specificare lo spessore del bordo intorno alla tabella.

Bordi HTML

È consentito utilizzare il bordo senza valori, quindi lo spessore del bordo sarà pari a un pixel. Per impostazione predefinita, la cornice viene visualizzata con effetti 3D, ma se applichi anche l'attributo di sfondo, la cornice diventerà "piatta".

Inoltre, se l'attributo border è diverso da zero, i browser mostrano anche bordi sottili attorno alle celle stesse. La visualizzazione di questi limiti può essere controllata utilizzando l'attributo regole.

I valori

Il valore dell'attributo può essere qualsiasi numero non negativo che specifichi la dimensione in pixel.

Valore predefinito: 0.

Sintassi

Attributo richiesto: nessuno.

Esempio HTML: applicazione dell'attributo Border

Esempio di risultato

Risultato. Applicazione dell'attributo border.



Pubblicazioni correlate
• Determinazione della velocità di movimento tramite gps A proposito, un fatto interessante sulla velocità del Sole nella Galassia

  Consigliamo vivamente di conoscerlo. Troverai molti nuovi amici lì. È anche il modo più veloce ed efficiente per entrare in contatto con ...

• Elimina utilizzando il telefono

  A volte gli utenti desiderano eliminare il proprio account su un social network e, naturalmente, sorge la domanda: come eliminare una pagina ...