Css двойная граница при

Свойство CSS border

Свойство CSS border слажит для создания границы объекта, а именно за толщину рамки, за ее цвет и стиль. Это свойство широко используется в HTML. Можно создавать различные эффекты для лучшего восприятия контента на странице. Например, оформить сайдбар, шапку сайта, меню и т.п.

1. Синтаксис CSS border

border: border-width border-style border-color | inherit;

• border-width — толщина рамки. Можно задавать в пикселях (px) или воспользоваться стандартными значениями thin, medium, thick (они отличаются только шириной в пикселях)
• border-style — стиль выводимой рамки. Может принимать следующие значения
  • none или hidden — отменяет границу
  • dotted — рамка из точек
  • dashed — рамка из тире
  • solid — простая линия (применяется чаще всего)
  • double — двойная рамка
  • groove — рифленая 3D граница
  • ridge , inset , outset — различные 3D эффекты рамки
  • inherit — применяется значение родительского элемента

  Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность «толщина стиль цвет».

  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 css">border_style_dashed">border-style: dashed/div> div class css">border_style_dashed">border-style: dashed/div> div class css">border_style_solid">border-style: solid/div> div class css">border_style_double">border-style: double/div> div class css">border_style_groove">border-style: groove/div> div class css">border_style_ridge">border-style: ridge/div> div class css">border_style_inset">border-style: inset/div> div class css">border_style_outset">border-style: outset/div> div class css">border_complex">Четыре разных рамки/div> /body> /html>

  Вот как это выглядит на странице:

  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 css">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 css">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 css">border_width_thin">border-width: thin/div> div class css">border_width_medium">border-width: medium/div> div class css">border_width_thick">border-width: thick/div> div class css">border_width">Разная толщина у границ/div> /body> /html>

  Вот как это выглядит на странице:

  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 css">primer_ramka_citata">Пример рамки для цитаты/div> /body> /html>

  Вот как это выглядит на странице:

  Примечание
  Можно задать отдельную границу для каждой из сторон.

  5. Как сделать несколько границ border у элемента html

  Иногда требуется сделать несколько границ. Приведем пример

  5.1. Первый вариант с несколькими границами

  html> head> style> .neskolko_granic < width: 200px; height: 200px; position: relative; border: 10px solid orange; > .neskolko_granic:after, .neskolko_granic:before < content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; > .neskolko_granic:after < border: 5px solid red; outline: 5px solid yellow; > .neskolko_granic:before < border: 10px solid green; > /style> /head> body> div class css">neskolko_granic"> /div> /body> /html>

  Вот как это выглядит на странице:

  Есть второй способ через наложение теней.

  5.2. Наложение теней для создания нескольких границ

  html> head> style> .neskolko_granic_2 < border: 5px solid red; width: 150px; height: 150px; box-shadow: 0 0 0 5px green, 0 0 0 10px yellow, 0 0 0 15px orange; > /style> /head> body> div class css">neskolko_granic_2"> /div> /body> /html>

  Вот как это выглядит на странице:

  6. Скругление углов у границ (border-radius)

  Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например

  div style value2">width:200px; height:100px; border:3px solid #ae0; border-radius: 10px">div>

  Более подробно про свойство border-radius читайте в отдельной статье: как скруглить углы у рамок в HTML.

  7. Вдавленная линия CSS

  Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.

  html> head> style> .vdavlennaya_liniya < border: 1px solid #222; border-bottom: 1px solid #333; > /style> /head> body> hr class css">vdavlennaya_liniya" /> /body> /html>

  Вот как это выглядит на странице:

  Для обращения к border из JavaScript нужно писать следующую конструкцию:

  [window.]document.getElementById("elementID").style.border value">VALUE"

  Источник

  Двойная рамка с использованием CSS

  Одним из занятных приложений свойства CSS3 box-shadow является создание двойной рамки вокруг элемента. Очень интересный эффект для оформления страниц, Но работать он будет только в новых версиях браузеров, которые поддерживают box-shadow .

  Однако существует еще несколько методов для создания такого эффекта. Причем очевидное использование фонового изображения является весьма далеким от идеала.

  В данном уроке представлены пять методов для создания двойной рамки вокруг элемента. Причем только один из них требует изображение, а все остальные используют чистый код CSS с отличной поддержкой в браузерах.

  

  Метод 1: border и outline

  Данный метод работает только в тех браузерах, которые поддерживают свойство outline (все, кроме IE6/7). Вы добавляете элементу оба свойства border и outline .

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

  Метод 2: псевдо элемент

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

  Ключевыми моментами являются установка свойства z-index (чтобы псевдо элемент перекрывал содержание), позиционирование и значение min-height . Последнее свойство сохраняет эластичность рамки.

  Метод 3: тень

  Самый лучший метод, так как требуется только одна строчка кода с установками свойства box-shadow .

  Для появления двойной рамки используются две тени. Они определяются через запятую. Размытие устанавливается в 0. Так как вторая тень перекрывается первой, то она имеет вдвое большую ширину. Ключевой момент — использование непрозрачных цветов, что создает четкую границу между рамками.

  Как и свойство outline , box-shadow не влияет на соседние элементы и может перекрывать их. Поэтому надо установить поле для формирования внешнего вида композиции.

  Естественно, поддержка свойства box-shadow ограничена новыми браузерами.

  Метод 4: Дополнительный элемент div

  В данном методе используется внешний элемент для вывода двойной рамки. Единственный метод, который работает везде:

  Внешний элемент имеет немного больший размер, что создает иллюзию двойной рамки.

  Метод 5: свойство border-image

  Еще одним новым методом является часто забываемое свойство CSS3 border-image :

  Знаете другой метод?

  Конечно, здесь собраны давно известные и широко используемые методы. Но может быть вам известен какой-нибудь трюк. Поделитесь с читателями в комментариях.

  Данный урок подготовлен для вас командой сайта ruseller.com
  Источник урока: www.impressivewebs.com/multiple-borders-css/
  Перевел: Сергей Фастунов
  Урок создан: 17 Ноября 2011
  Просмотров: 86814
  Правила перепечатки

  5 последних уроков рубрики «CSS»

  • 

  Забавные эффекты для букв

  

  Реализация забавных подсказок

  Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

  

  Анимированные буквы

  

  Солнцезащитные очки от первого лица

  Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

  Источник

  Читайте также:  Google 64 bit java