Границы

Оцените материал
(3 голосов)

Здравствуйте! От внутренних отсутпов в CSS плавно переходим к границам элемента. Граница отделяется элемент от внешнего по отношению к нему содержимого. При этом граница является частью элемента.

Для настройки границы могут использоваться сразу несколько свойств:

  • border-width: устанавливает ширину границы

  • border-style: задает стиль линии границы

  • border-color: устанавливает цвет границы

 

 

Свойство border-width может принимать следующие типы значений:

  • Значения в единицах измерения, таких как em, px или cm

    border-width: 2px;
  • Одно из константных значений: thin (тонкая граница - 1px), medium (средняя по ширине - 3px), thick (толстая - 5px)

    border-width: medium;
    

Свойство border-color в качестве значения принимает цвет CSS:

border-color: red;

Свойство border-style оформляет тип линии границы и может принимать одно из следующих значений:

  • none: граница отсутствует

  • solid: граница в виде обычной линии

  • dashed: штриховая линия

  • dotted: линия в виде последовательности точек

  • double: граница в виде двух параллельных линий

  • groove: граница имеет трехмерный эффект

  • inset: граница как бы вдавливается во внутрь

  • outset: аналогично inset, только граница как бы выступает наружу

  • ridge: граница также реализует трехмерный эффект

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
            div{
                width: 100px;
                height:100px;
                border-style: solid;
                border-color: red;
                border-width: 2px;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

Просмотреть  пример

При необходимости мы можем определить цвет, стиль и ширину границы для каждой из сторон используя следующие свойства:

/* для верхней границы */
border-top-width
border-top-style
border-top-color
 
/* для нижней границы */
border-bottom-width
border-bottom-style
border-bottom-color
 
/* для левой границы */
border-left-width
border-left-style
border-left-color
 
/* для правой границы */
border-right-width
border-right-style
border-right-color

Свойство border

Вместо установки по отдельности цвета, стиля и ширины границы мы можем использовать одно свойство - border:

border: ширина стиль цвет

Например:

border: 2px solid red;

Для установки границы для отдельных сторон можно использовать одно из свойств:

border-top
border-bottom
border-left
border-right

Их использование аналогично:

border-top: 2px solid red;

Радиус границы

Свойство border-radius позволяет округлить границу. Это свойство принимает значение радиуса в пикселях или единицах em.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
            div{
                width: 100px;
                height:100px;
                border: 2px solid red;
                border-radius: 30px;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

Просмотреть  пример

Теперь каждый угол будет скругляться по радиусу в 30 пикселей:

Так как у элемента может быть максимально четыре угла, то мы можем указать четыре значения для установки радиуса у каждого углов:

border-radius: 15px 30px 5px 40px;

Вместо общей установки радиусов для всех углов, можно их устанавливать по отдельности. Так, предыдущее значение border-radius можно переписать следующим образом:

border-top-left-radius: 15px;   /* радиус для верхнего левого угла */
border-top-right-radius: 30px;  /* радиус для верхнего правого угла */
border-bottom-right-radius: 5px;    /* радиус для нижнего левого угла */
border-bottom-left-radius: 40px;    /* радиус для нижнего правого угла */

Также border-radius поддерживает возможность создания эллиптических углов. То есть угол не просто скругляется, а использует два радиуса, образуя в итоге душу эллипса:

border-radius: 40px/20px;

В данном случае полагается, что радиус по оси X будет иметь значение 40 пикселей, а по оси Y - 20 пикселей.

Прочитано 748 раз Последнее изменение Воскресенье, 24 июля 2016 10:21
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

Поиск по сайту

Google+