Установи Linux! Стань свободным!
Онлайн всего: 1 | Посетители: 0 | Боты: 1
Дата 06.07.2025 Время: 06:38
Ваш IP: 216.73.216.144
Загрузка сервера: 0.45
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 (не будет опубликован)
Имя
Комментарий
Введите число с картинки:     
Случайные статьи

   Y PPA Manager — PPA менеджер
Y PPA Manager — программа для редактирования и управления PPA репозиториями Launchpad. Y PPA Manager позволяет очень быстро, а самое главное просто удалить, добавить или отредактировать репозиторий, посмотреть список подключенных репозиториев, а так же получить список приложений находящихся в этом репозитории. Помимо всего Y PPA Manager может удалить дубликаты репозиториев, решить проблемы с ключами, загружать…
  2017-08-12 20:41:10 | Категория: Система
   Антивирусный сканер ClamAV
Зачем нужен антивирус для Ubuntu? Ведь вирусов для Ubuntu нет, или почти нет! Да действительно, антивирус для Ubuntu не нужен, но он нужен Windows. Возможно Ваша флешка заражена вирусами и вы ее используете на другом ПК с Windows, или у Вас на диске имеется второй раздел с WIndows. Так же используя wine в папке которой могут быть зараженные windows приложения. И не имея антивирусной программы Вы способствуете распространению…
  2017-08-11 19:27:31 | Категория: Система
   Krusader
Krusader — это простой в освоении, мощный, двухпанельный (в стиле Commander) файловый менеджер, похожий на Midnight Commander или Total Commander. Предоставляет все функции для управления файлами, которые только могут понадобиться. Дополнительно: широкие возможности обработки архивов, поддержка монтирования файловых систем, FTP, расширенный поисковый модуль, функции просмотра и правки, синхронизация каталогов, сравнение…
  2017-08-04 09:41:20 | Категория: Система
   Удаление элементов массива
В этой статье будет рассмотрено удаление элементов массива как по ключу, так и по значению. Удаление элементов массива по значению: $b = array('zip','7z','rar','tar','taz'); print_r ($b); echo "<br>"; $x = array_search('7z', $b); // находим значение в массиве unset($b[$x]); // удаляем из массива значение print_r ($b); Для удаления элемента массива по значению, необходимо сначала его найти в массиве (функция array_search), а затем…
  2017-08-20 09:43:23 | Категория: PHP
   Enigma — игра головоломка
Enigma это игра-головоломка, примером подражания для которой стали Oxyd на платформе Atari ST и Rock’n’Roll на платформе Amiga. Цель игры состоит в поиске открытых пар камней-оксидов одинакового цвета. Просто? Да. Легко? Конечно нет! Скрытые ловушки, огромные лабиринты, лазерные лучи и прежде всего бесчисленные причудливые головоломки, обычно перекрывающие Вам прямой путь к камням-оксидам… Enigma доступна для Windows,…
  2017-08-03 09:42:51 | Категория: Игры

Вверх