Установи Linux! Стань свободным!
Онлайн всего: 4 | Посетители: 0 | Боты: 4
Дата 25.09.2017 Время: 03:20
Ваш IP: 54.224.210.130
Загрузка сервера: 0.6
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 | Просмотров: 95
Комментарии
E-mail (не будет опубликован)
Имя
Комментарий
Введите число с картинки:     
Случайные статьи

   array_diff - вычисления расхождения в массивах
Функция array_diff() сравнивает элементы массивов и возвращает элементы первого массива которых нет во втором, ключи при этом сохраняются. Пример использования: $a = array (22=>'кошка','мышка','сапог','пряник'); $b = array (13=>'кошка','пряник','кино','стакан'); $arr = array_diff ($a, $b); print_r($arr); Array ( [23] => мышка [24] =>…
  2017-08-31 21:58:33 | Категория: PHP
   ЭКРАННАЯ ЛИНЕЙКА — ИЗМЕРЯЙТЕ ОБЪЕКТЫ НА ВАШЕМ ЭКРАНЕ
Экранная линейка — измеряйте объекты на вашем экране ScreenRuler показывает на экране линейку, позволяющую измерять другие объекты. Возможности программы: горизонтальное и вертикальное измерение в 6 разных единицах измерения: пикселы, сантиметры, дюймы, цицеро (pica), пункты (point) и проценты от длины линейки. настраиваемые цвета и шрифты управление с клавиатуры для точного позиционирования режим…
  2017-08-10 13:45:05 | Категория: Офис
   MY WEATHER INDICATOR — ПОГОДНЫЙ ВИДЖЕТ ДЛЯ UBUNTU
Погодный виджет My Weather Indicator очень прост в настройке, достаточно указать город и он готов к работе. Дополнительные настройки виджета практически не требуются, имеются несколько тем погодного виджета, простое перемещение виджета по рабочему столу при помощи курсора. Меню My Weather Indicator в трее помимо настроек содержит довольно много полезной информации. Для установки погодного виджета в терминале выполните…
  2017-08-10 13:49:50 | Категория: Разное
   Calligra Suite - пакет офисных приложений
Calligra Suite — это пакет офисных приложений, входящий в состав проекта KDE. Изначально создавался как форк пакета KOffice, разрабатывавшегося ранее. Все компоненты пакета опубликованы под свободными и открытыми лицензиями. Части пакета: Часть Описание Words Текстовый процессор, ориентированный на стили (вместо конкретных атрибутов шрифта) и врезки (вместо страниц) Sheets Табличный процессор,…
  2017-09-20 09:47:14 | Категория: Офис
   Не запускается OPENSHOT (Ubuntu 15.10)
OpenShot Video Editor — это свободный нелинейный видеоредактор с открытым исходным кодом для Linux, построенный с помощью Python, GTK и MLT Framework. Проект был основан в августе 2008 года Джонатоном Томасом, с целью предоставления стабильного, свободного и простого в использовании видеоредактора. После очередного обновления видеоредактор Openshot перестал запускаться, при запуске программы через терминал возникает…
  2017-08-13 10:19:45 | Категория: Система

Вверх