Установи Linux! Стань свободным!
Онлайн всего: 5 | Посетители: 4 | Боты: 1
Дата 19.11.2017 Время: 16:08
Ваш IP: 54.224.168.206
Загрузка сервера: 8.5
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 | Просмотров: 100
Комментарии
E-mail (не будет опубликован)
Имя
Комментарий
Введите число с картинки:     
Случайные статьи

   Эквалайзер для Linux Ubuntu
Эквалайзер содержит 15 полос, имеется возможность выбора темы звуковых настроек эквалайзера (Club, Dance, Flat и др.). Так же можно сохранить выбранные настройки звука. Для установки эквалайзера необходимо в терминале выполнить следующие действия:подключаем дополнительный репозиторий: sudo add-apt-repository ppa:nilarimogard/webupd8 sudo apt-get update Устанавливаем приложение sudo apt-get install pulseaudio-equalizer Дополнительно автоматически…
  2017-08-07 20:07:02 | Категория: Ubuntu
   PINGUS
Pingus — созданная Инго Рюнке свободная компьютерная игра основанная на игровом процессе классической игры Lemmings. В отличие от оригинала главными героями в ней являются пингвины, а не лемминги. Работа над игрой началась в 1998 году. В 2006 году, Pingus имел только 22 доступных из интерфейса игры уровня, все связанные с зимней темой. Однако в игру включен редактор, который позволяет создавать новые уровни, и включены…
  2017-08-01 08:55:42 | Категория: Игры
   BASTET («BASTARD TETRIS») — ЭТО СВОБОДНЫЙ КЛОН ИГРЫ ТЕТРИС
Bastet («bastard Tetris») — это свободный клон игры Тетрис, который пытается вычислить, насколько полезен тот или иной блок, и выдаёт вам наихудшие из возможных блоков. Игра может вам не понравиться, особенно если вы любите выстраивать «каньоны» и ждать, пока не появится длинный I-образный блок. Программа Bastet доступна в официальном репозитории Ubuntu, поэтому ее можно установить через центр приложений Ubuntu…
  2017-08-08 18:32:44 | Категория: Игры
   Удаление файлов и каталогов
Для того чтобы удалить файл необходимо воспользоваться утилитой rm, например: rm /home/имя пользователя/Загрузки/271397.pdf  Если для файла отсутствуют права на запись, вы можете получить сообщение об ошибке с отказом в доступе. Чтобы принудительно удалить неважно какой файл, используйте опцию -f, например так: rm -f /home/имя пользователя/Загрузки/271397.pdf  Для удаления каталога необходимо добавить…
  2017-08-03 09:40:16 | Категория: Команды терминала
   EMULE — КЛИЕНТ ДЛЯ СЕТИ ОБМЕНА ФАЙЛАМИ ED2K
eMule — это клиент для сети обмена файлами ED2K. Проще говоря, менеджер закачки файлов с компьютеров всех пользователей Интернет, пользующихся программой eMule. На сегодняшний день, eMule — один из самых больших и надежных клиентов для сетей обмена файлами peer-to-peer в мире. Благодаря принципам открытого кода (open source), многие разработчики со всего мира могут участвовать в проекте, делая сеть более эффективной с…
  2017-08-09 07:44:40 | Категория: Интернет

Вверх