Установи Linux! Стань свободным!
Онлайн всего: 3 | Посетители: 0 | Боты: 3
Дата 01.07.2025 Время: 22:56
Ваш IP: 216.73.216.48
Загрузка сервера: 1.37
old.ubuntu-desktop.ru - border - CSS    Главная > Веб-программирование > CSS

border

Свойство border объединяет в себе все свойства, которые используются для определения границы (рамки) элемента.

Несколько примеров использования:

  • Рамка вокруг элемента

CSS

.help {
border: 5px solid red;  /* рамка вокруг текста */
padding: 5px; /* Поля вокруг текста */
width: 300px; /* ширина элемента */
 }

HTML

<div class="help">Привет!!!</div>

728975203829

  • Задаем цвет и ширину рамки отдельно по сторонам

border-top (верхняя граница)

border-right (правая граница)

border-bottom (нижняя граница)

border-left (левая граница)

.help {
border-left: 10px solid red;
border-right:10px solid #000000;
border-top:  10px solid green;
border-bottom: 10px solid #777;
padding: 5px; /* Поля вокруг текста */
width: 300px; /* ширина элемента */
 }

73425673469782368

  • Свойство border-style задает стиль для четырех границ. Это свойство может иметь от одного до четырех значений
.help {
border-style:dotted solid double dashed; /* верхняя граница в-точку - правая граница обычная - нижняя граница двойная - левая граница в-тире */
padding: 5px; /* Поля вокруг текста */
width: 300px; /* ширина рамки */
 }

7823708709823

.help {
border-style:dotted solid double dashed; /* верхняя граница в-точку - правая граница обычная - нижняя граница двойная - левая граница в-тире */
border-width: 5px; /* ширина рамки */
border-color: red; /* цвет рамки */
padding: 5px; /* Поля вокруг текста */
width: 300px; /* ширина элемента */
 }

3647567868392

  • Свойство border-color задает цвет для четырех границ. Это свойство может иметь от одного до четырех значений.
.help {
border-style: solid; /* граница обычная */
border-width: 5px; /* ширина рамки */
border-color: red #555 #cdcdcd green; /* цвет рамки (до 4-х значений) */
padding: 5px; /* Поля вокруг текста */
width: 300px; /* ширина элемента */
 }

  • Свойство border-radius позволяет установить радиус скругления уголков рамки
.help {
border: 5px solid #cdcdcd; /* ширина рамки и цвет */
border-radius: 25px; /* радиус углов рамки */
padding: 5px; /* Поля вокруг текста */
width: 300px; /* ширина элемента */
 }

.help {
border: 5px solid #cdcdcd; /* ширина рамки и цвет */
border-radius: 25px 25px 0px 0px; /* радиус углов рамки */
padding: 5px; /* Поля вокруг текста */
width: 300px; /* ширина элемента */
 }

3752698726323

.help {
border: 3px dotted #777; /* ширина рамки и цвет */
border-radius: 100px; /* радиус углов рамки */
padding: 10px; /* Поля вокруг текста */
width: 100px; /* ширина элемента */
 }

27584798798237908

  • Закругляем углы отдельно по сторонам
.help {
border: 2px solid red; /* ширина рамки и цвет */
border-top-right-radius: 25px; /* Задаем радиус рерхнего правого угла */
border-top-left-radius: 10px; /* Задаем радиус рерхнего левого угла */
padding: 10px; /* Поля вокруг текста */
width: 100px; /* ширина элемента */
 }

763782638768723

Рейтинг
<< Предыдущая статьяСледующая статья >>
  2017-08-24 20:46:57 | liman28 | Категория: CSS | Просмотров: 123
Комментарии
E-mail (не будет опубликован)
Имя
Комментарий
Введите число с картинки:     
Случайные статьи

   ДЕЛАЕМ ВИДЕО-РОЛИК ИЗ ВАШИХ ФОТОГРАФИЙ
Делаем видео-ролик из ваших фотографий при помощи программы MEncoder.MEncoder — компьютерная программа для конвертирования аудио и видео файлов. Поддерживает большинство существующих кодеков и медиаконтейнеров. Является частью проекта MPlayer. Простая команда позволит создать видео ролик из ваших фотографий, добавить звук (мелодию): mencoder mf://*.jpg -mf fps=0.5 -ofps 25 -vf scale=800:600 -ovc lavc -oac pcm -lavcopts vcodec=ffv1 -audiofile 1.mp3 -o input1.avi Для…
  2017-08-11 17:56:20 | Категория: Команды терминала
   Logisim - графический инструмент для дизайна и имитации логических схем
Logisim является образовательным инструментом для разработки и моделирования цифровых логических схем. Благодаря простому интерфейсу панели инструментов и моделированию схем по ходу их проектирования, Logisim достаточно прост, чтобы облегчить изучение основных понятий, связанных с логическими схемами. При возможности постройки больших схем из меньших подсхем и рисования пучков проводов одним…
  2017-08-15 08:46:03 | Категория: Разное
   array_sum - вычисление суммы значений массива
Функция array_sum() вычисляет сумму значений массива. Пример использования: $a = array (12.43,14,53,8); $arr = array_sum…
  2017-09-06 20:59:40 | Категория: PHP
   Rosa Media Player — мультимедиа проигрыватель
Rosa Media Player — мультимедиа проигрыватель, основанный на наработках проекта SMPlayer и являющегося надстройкой над MPlayer и FFmpeg. Особенностью мультимедиа проигрывателя являться большое кол-во поддерживаемых форматов, а так же удобный и не перегруженный интерфейс. Мультимедиа проигрыватель Rosa Media Player поддерживает DVD-меню, может обрезать видео файлы, извлекать звук из видео файлов…
  2017-08-12 20:00:35 | Категория: Мультимедиа
   Меняем время сессии sudo
Команда sudo предоставляет возможность пользователям выполнять команды от имени суперпользователя root, либо других пользователей. По умолчанию сессия sudo длится 15 минут, то есть если не закрывать терминал можно выполнять команды с правами sudo в течении 15 минут не вводя пароля. Спустя 15 минут снова придется вводить пароль.   Для того чтобы изменить время сессии sudo необходимо отредактировать файл sudoers…
  2017-08-03 11:09:55 | Категория:

Вверх