CSS: свойство border

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

CSS: свойство border

Сообщение Александр » 04 сен 2013, 08:51

Данное универсальное свойство поможет вам в установке толщины, стиля и цвета вокруг выбранного элемента. Свойство border позволяет полностью управлять внешним видом задуманной вами рамки. Иначе говоря данное свойство позволяет установить быстрый контроль над border-width, border-style и border-color. Можно еще добавить что применяется оно ко всем 4-м сторонам элемента.
Посмотрим как это применяеися в коде:
Код: выделить все
<html>
 <head>
  <meta charset="utf-8">
  <title>Свойство border</title>
  <style>
   .brd {
   border: 14px solid green; /* Цвет фона */
   padding: 20px; /* Поля вокруг текста */
   background-color: #6F0;
   }
  </style>
 </head>
<body>
  <div class="brd">
   Текст  Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
 </div>

 </body>
</html>

Выглядит это так:
solid.gif
Параметр solid
solid.gif (11.14 KiB) Просмотров: 3409

Конечно его можно было написать и так:
Код: выделить все
 .brd  {
        border-top: 14px solid green;
        border-bottom: 14px solid green;
        border-left: 14px solid green;
        border-right: 14px solid green;
}

Но лучше все же использовать приведенный вид записи в первом примере.
Так же хочется сказать о том что значения свойств border-width, border-style и border-color разделенные пробелом, могут располагаться в любом порядке.
Если с шириной бордюра и цветом думаю что никаких проблем не будет, то про стили рамки стоит еще упомянуть.
Кроме уже приведенного стиля "solid", так же возможно применять:
solid.gif
Параметр solid
solid.gif (11.14 KiB) Просмотров: 3409

dotted.gif
Стиль dotted
dotted.gif (14.98 KiB) Просмотров: 3409
Вложения
double.gif
Стиль double
double.gif (11.15 KiB) Просмотров: 3409
Аватар пользователя
Александр
Продвинутый Юзер
 
Сообщений: 218
Зарегистрирован: 12 мар 2012, 16:32

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

Сообщение Александр » 04 сен 2013, 09:01

dashed.gif
Стиль dashed
dashed.gif (11.76 KiB) Просмотров: 3408

groove.gif
Стиль groove
groove.gif (12.75 KiB) Просмотров: 3408

ridge.gif
Стиль ridge
ridge.gif (10.96 KiB) Просмотров: 3408
Аватар пользователя
Александр
Продвинутый Юзер
 
Сообщений: 218
Зарегистрирован: 12 мар 2012, 16:32

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

Сообщение Александр » 04 сен 2013, 09:02

insert.gif
Стиль insert
insert.gif (11.97 KiB) Просмотров: 3408

outset.gif
Стиль outset
outset.gif (11.66 KiB) Просмотров: 3408
Аватар пользователя
Александр
Продвинутый Юзер
 
Сообщений: 218
Зарегистрирован: 12 мар 2012, 16:32


Вернуться в Программирование для Web

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2

cron