В CSS существуют два различных типа рамок: border и outline. Тогда как border всегда обозначает прямоугольную рамку, введенные в CSS2 рамки outline предназначены для неугловых областей. Есть еще одно различие: при использовании outline обводка находится за границей рамки, благодаря чему элемент может получить и рамку с border, и обводку с outline.
Представленные в этом уроке определения рамок в основном интересны для элементов, формирующих собственный абзац. В принципе, их можно применять и к другим элементам.
Определение рамок
С помощью border можно задать внешний вид рамки вокруг элемента.
Общее свойство border является суммированием следующих значений, о которых будет подробно рассказано:
• border-color
• border-style
• border-width
Значения для каждого свойства указываются через пробел. Порядок указания свойств не имеет значения. Для border также существуют четыре подсвойства, позволяющие задавать цвет рамки, толщину рамки и тип рамки для отдельных сторон элемента.
• border-top – рамка сверху
• border-right – рамка справа
• border-bottom – рамка снизу
• border-left – рамка слева
В следующем примере показано использование border. С помощью этого определения создается рамка шириной в три пикселя, черного цвета и сплошного типа.
<p style="border:3pt solid #000000;"> Добро пожаловать </p>
Результат в браузере:
Цвет рамки
Свойством border-color задается цвет рамки. Допустимы следующие значения:
• transparent – прозрачная рамка
• Значение цвета
Если указано только одно значение, оно применяется ко всем сторонам рамки. Чтобы задать разные цвета для отдельных сторон, нужно указать несколько значений, разделенных пробелами.
• Два значения – первое для верхней и нижней, второе для левой и правой стороны рамки.
• Три значения – первое для верхней, второе для левой и правой, третье для нижней стороны рамки.
• Четыре значения – первое для верхней, второе для правой, третье для нижней, четвертое для левой стороны рамки.
Также можно использовать следующие подсвойства border:
• border-top-color – цвет рамки сверху
• border-right-color – цвет рамки справа
• border-bottom-color – цвет рамки снизу
• border-left-color – цвет рамки слева
Пример:
<p style="border-color: #ffff00; border-width: 3px; border-style: solid; padding: 2px"> PSD-Tutorials.de </p>
А это результат в браузере:
Тип линии
Свойством border-style задается тип линии рамки.
Ниже приведен список возможных вариантов линий рамки:
• none – невидимая рамка
• dotted – пунктирная
• dashed – пунктирная
• solid – сплошная
• double – двойная сплошная
• groove – вогнутая 3D-линия
• ridge – выпуклая 3D-линия
• inset – внутренняя 3D-линия
• outset – внешняя 3D-линия
Вот пример того, как выглядят различные типы рамок:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>
<body>
<p class="none">none</p>
<p class="dotted">dotted</p>
<p class="dashed">dashed</p>
<p class="solid">solid</p>
<p class="double">double</p>
<p class="groove">groove</p>
<p class="ridge">ridge</p>
<p class="inset">inset</p>
<p class="outset">outset</p>
<p class="hidden">hidden</p>
</body>
</html>Результат в браузере:
Если указано только одно значение, оно применяется ко всем сторонам рамки. Чтобы задать типы рамок для отдельных сторон, нужно указать несколько значений, разделенных пробелами.
• Два значения – первое для верхней и нижней, второе для левой и правой стороны рамки.
• Три значения – первое для верхней, второе для левой и правой, третье для нижней стороны рамки.
• Четыре значения – первое для верхней, второе для правой, третье для нижней, четвертое для левой стороны рамки.
Также можно использовать следующие подсвойства border:
• border-top-style – тип рамки сверху
• border-right-style – тип рамки справа
• border-bottom-style – тип рамки снизу
• border-left-style – тип рамки слева
Также вот пример:
<p style="border-bottom-style: dashed;"> Пунктирная рамка </p>
И так выглядит в браузере:
Задание ширины рамки
С помощью border-width определяется ширина рамки.
• Указание длины
• thin – тонкая рамка
• medium – средней толщины рамка
• thick – толстая рамка
Если указано только одно значение, оно применяется ко всем сторонам элемента. Чтобы задать разные толщины рамки для отдельных сторон, существует два способа. В первом варианте перечисляются несколько значений, разделенных пробелами.
• Два значения – первое для верхней и нижней, второе для левой и правой толщины рамки.
• Три значения – первое для верхней, второе для левой и правой, третье для нижней толщины рамки.
• Четыре значения – первое значение для верхней, второе для правой, третье для нижней и четвертое для левой толщины рамки.
Также вы можете использовать следующие свойства для рамки:
• border-top-width – толщина рамки сверху
• border-right-width – толщина рамки справа
• border-bottom-width – толщина рамки снизу
• border-left-width – толщина рамки слева
Пример:
<p style="border-width:2px;border-style: dotted;"> Добро пожаловать </p>
Цвет рамки для обводки
Цвет рамки определяется с помощью свойства outline-color. Указывается так же, как и для border-color.
• invert – цвет инвертируется. Этот цвет создается путем инверсии всех битов шестнадцатеричного значения цвета.
• Указание цвета
Пример:
<p style="outline-width: medium; outline-style: solid; outline-color: blue;"> PSD-Tutorials.de </p>
Так это выглядит в браузере:
Тип рамки для обводки
Свойство outline-style определяет тип контура. Разрешенные значения те же, что и для border-style.
• none – невидимая рамка
• dotted – пунктирная линия
• dashed – штриховая линия
• solid – сплошная линия
• double – двойная линия
• groove – 3D-линия
• ridge – 3D-линия
• inset – 3D-линия
• outset – 3D-линия
Пример:
<p style="outline-style:solid;outline-width:2px; outline-color:red;"> PSD-Tutorials.de </p>
Толщина рамки для обводки
Свойство outline-width аналогично border-width. Оно также определяет толщину рамки. Чтобы создать видимую обводку, всегда комбинируйте outline-width с outline-style.
• medium – средней толщины рамка
• thin – тонкая рамка
• thick – толстая рамка
• Указание длины – определяет толщину рамки
Пример:
<p style="outline-width: thin;outline-style: solid; outline-color: red;">
Добро пожаловать
</p>
И как и для border существует общее свойство для рамок outline.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p {
border:red solid thick;
outline:green dotted thick;
}
</style>
</head>
<body>
<p>Добро пожаловать на PSD-Tutorials.de!</p>
</body>
</html>
Здесь объединены следующие свойства:
• outline-width
• outline-style
• outline-color
Принцип здесь то же, что и для общего свойства border.
