Содержание
2. Примеры с различными границами рамок CSS border
2.1. Пример. Разные стили оформления границы рамки border-style
<html> <head> <style> .border_style_dotted{ border: 2px dotted #1E90FF; padding: 3px; margin-bottom: 5px; } .border_style_dashed{ border: 2px dashed #1E90FF; padding: 3px; margin-bottom: 5px; } .border_style_solid{ border: 2px solid #1E90FF; padding: 3px; margin-bottom: 5px; } .border_style_double{ border: 2px double #1E90FF; padding: 3px; margin-bottom: 5px; } .border_style_groove{ border: 5px groove #1E90FF; padding: 3px; margin-bottom: 5px; } .border_style_ridge{ border: 5px ridge #1E90FF; padding: 3px; margin-bottom: 5px; } .border_style_inset{ border: 5px inset #1E90FF; padding: 3px; margin-bottom: 5px; } .border_style_outset{ border: 5px outset #1E90FF; padding: 3px; margin-bottom: 5px; } .border_complex{ border-left: 5px solid #1E90FF; border-right: 5px dotted #1E90FF; border-top: 5px double #1E90FF; border-bottom: 5px dashed #1E90FF; padding: 3px; margin-bottom: 5px; } </style> </head> <body> <div class=»border_style_dashed»>border-style: dashed</div> <div class=»border_style_dashed»>border-style: dashed</div> <div class=»border_style_solid»>border-style: solid</div> <div class=»border_style_double»>border-style: double</div> <div class=»border_style_groove»>border-style: groove</div> <div class=»border_style_ridge»>border-style: ridge</div> <div class=»border_style_inset»>border-style: inset</div> <div class=»border_style_outset»>border-style: outset</div> <div class=»border_complex»>Четыре разных рамки</div> </body> </html>
Вот как это выглядит на странице:
border-style: dotted border-style: dashed border-style: solid border-style: double border-style: groove border-style: ridge border-style: inset border-style: outset Четыре разных рамки
2.2. Пример. Изменения цвета рамки при наведении курсора мыши
Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).
<html> <head> <style> .border_hover{ border: 2px solid #1E90FF; padding: 5px; width: 500px; height: 60px; } .border_hover:hover{ border: 2px solid #F0F; padding: 5px; } </style> </head> <body> <div class=»border_hover»>При наведении курсора мыши на блок цвет рамки изменится</div> </body> </html>
Вот как это выглядит на странице:
При наведении курсора мыши на блок цвет рамки изменится
2.3. Пример. Как сделать прозрачную рамку border
Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P), где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)
<html> <head> <style> .opacity_border{ border: 10px solid rgba(80, 55, 80, 0.5); background: url(‘img/primer-fona.jpg’); width: 130px; height: 116px; } </style> </head> <body> <div class=»opacity_border»></div> </body> </html>
Вот как это выглядит на странице:
3. Толщина границы: свойство border-width
Задает толщину линии. Ранее мы задавали ее в едином описании border.
Синтаксис CSS border-width
border-width: thin | medium | thick | значение;
Где
- thin — тонкая толщина линии
- medium — средняя толщина линии
- thick — толстая толщина линии
Ниже приведены несколько примеров. Самым необычным будет — это разная толщина границы у каждой стороны.
<html> <head> <style> .border_width_thin{ border-style: solid; border-color: #1E90FF; border-width: thin; } .border_width_medium{ border-style: solid; border-color: #1E90FF; border-width: medium; } .border_width_thick{ border-style: solid; border-color: #1E90FF; border-width: thick; } .border_width{ border-style: solid; border-color: #1E90FF; border-width: 1px 2px 3px 4px; } </style> </head> <body> <div class=»border_width_thin»>border-width: thin</div> <div class=»border_width_medium»>border-width: medium</div> <div class=»border_width_thick»>border-width: thick</div> <div class=»border_width»>Разная толщина у границ</div> </body> </html>
Вот как это выглядит на странице:
border-width: thin
border-width: medium
border-width: thick
Разная толщина у границ
4. Как сделать рамку border только с одного края (границы)
У свойства CSS border есть производные свойства для задания односторонних границ у элемента:
- border-top — для задания рамки сверху (верхняя граница)
- border-bottom — для задания рамки снизу (нижняя граница)
- border-right — для задания рамки справа (правая граница)
- border-left — для задания рамки слева (левая граница)
Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.
Также есть свойства
- border-top-color — задание цвета верхний границы
- border-top-style — задание стиля верхней границы
- border-top-width — задание толщины верхней границы
- и т.д. для каждого направления
На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми
/* Описание двух одинаковых стилей: */ <style> .svoystvo1{ border-top: 1px solid #DEB887; } .svoystvo2{ border-top-color: #DEB887; border-top-style: solid; border-top-width: 1px; } </style>
4.1. Пример. Красивая рамка для выделения цитат
<html> <head> <style> .primer_ramka_citata{ width: 300px; height: 200px; border: 1px solid #DEB887; border-left: 2px dashed #006400; background: #EEE8AA; padding: 5px; margin-bottom: 5px; } </style> </head> <body> <div class=»primer_ramka_citata»>Пример рамки для цитаты</div> </body> </html>
Вот как это выглядит на странице:
Пример рамки для цитаты
Примечание
Можно задать отдельную границу для каждой из сторон.
