CSS3 | Границы
Границы
Последнее обновление: 21.04.2016
Граница отделяется элемент от внешнего по отношению к нему содержимого. При этом граница является частью элемента.
Для настройки границы могут использоваться сразу несколько свойств:
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 пикселей.
границы | htmlbook.ru
границы | htmlbook.ruСделайте страницу, как показано на рис. 1. Рамка должна корректно отображаться во всех современных браузерах.
Рис. 1
Сделайте индикатор прогресса, как показано на рис. 1. Ширина самого элемента 100%, высота 20px. Значение индикатора должно легко задаваться через ширину, как в процентах, так и пикселах.
Рис. 1
Сделайте страницу, как показано на рис. 1. Ширина блока резиновая и меняется в зависимости от размеров окна браузера. Указатель всегда располагается посередине блока, размеры указателя фиксированы.
Рис. 1
С помощью приложенной картинки рамки сделайте масштабируемый по ширине блок с рисованной границей, как показано на рисунке ниже.
Добавьте к блоку небольшие квадратные вырезы по углам, как это показано на рисунке ниже. Код должен корректно работать в IE8+ и современных браузерах.
Сделайте рамку вокруг блока, как показано на рис. 1. Рамка должна корректно отображаться во всех современных браузерах.
Рис. 1. Двойная рамка вокруг блока
Придумайте пять способов создания рамки вокруг абзаца произвольного текста (тега <p>). Изменять и модифицировать код HTML нельзя, все изменения делаются только через стили. Кроссбраузерность можно не учитывать.
Для приведённого кода создайте стиль, с помощью которого можно получить результат, представленный на рис. 1. Страница должна корректно отображаться в браузерах IE8+, Firefox 5+, Opera 11+ и Chrome.
Сделайте блок, показанный на рис. 1.
Рис. 1
С помощью стилей создайте текст в рамке, как показано на рис. 1.
Рис. 1
О сайте
Помощь
Копирование материалов
Борьба с ошибками
Технологии
Поисковый плагин
Основные разделы
Статьи
Блог
Практикум
Цифровые книги
Форум
HTML
Самоучитель HTML
XHTML
Справочник по HTML
HTML5
CSS
Самоучитель CSS
Справочник по CSS
Рецепты CSS
CSS3
Сайт
Вёрстка
Макеты
Веб-сервер
htmlbook.ru использует Друпал хостинг it-patrol© 2002–2020 Влад Мержевич, по всем вопросам пишите по адресу [email protected]
Подпишитесь на материалы сайта по RSS
Границы CSS | Как создать сайт
Границы CSS
Здравствуйте! От внутренних отсутпов в 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 пикселей.
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Поделиться
Твитнуть
Поделиться
Также читайте
Граница элемента или блока в CSS HTML
Свойство CSS – «border», позволяет задавать толщину, цвет и тип линии по периметру вокруг элемента. Параметры данного свойства могут записываться в одной строке, разделяясь через пробел и в любом порядке.
Примеры задания параметров границы
border : 1px solid white;
border : 1px solid black;
border : 1px solid gray;
1px– толщина линии один пиксельsolid– сплошная линияwhite– белый цветblack– чёрный цветgray– серый цвет
Сплошная граница элемента
HTML
<div>
Рамка сплошной линией
</div>
CSS
body{
height: 100%;
font-size: 20px;
padding-top: 50px;
background-color: #eaeaea;
font-family: Arial, Helvetica, sans-serif;
}
.solid{
width: 250px;
padding: 20px;
margin: 0px auto;
background: #fc3;
border: 4px solid black;
}
Штриховая граница элемента
border: 4px dashed black;
HTML
<div>
Рамка штриховой линией
</div>
CSS
.dashed{
width: 250px;
padding: 20px;
margin: 0px auto;
background: #fc3;
border: 4px dashed black;
}
Пунктирная граница элемента
border: 4px dotted black;
HTML
<div>
Рамка пунктирной линией
</div>
CSS
.dotted{
width: 250px;
padding: 20px;
margin: 0px auto;
background: #fc3;
border: 4px dotted black;
}
Граница элемента двойной линией
border: 6px double black;
HTML
<div>
Рамка двойной линией
</div>
CSS
.double{
width: 250px;
padding: 20px;
margin: 0px auto;
background: #fc3;
border: 6px double black;
}
Свойство отдельных участков границы
border-top: 8px solid red;
border-bottom: 8px solid blue;
border-left: 8px solid grey;
border-right: 8px solid chocolate;
HTML
<div>
Разноцветная рамка
</div>
CSS
.individual{
width: 250px;
padding: 20px;
margin: 0px auto;
background: #fc3;
text-align: center;
border-top : 8px solid red;
border-bottom : 8px solid blue;
border-left : 8px solid grey;
border-right : 8px solid chocolate;
}
Вдавленная рифленая рамка в объёме
border: 12px groove #999;
Объемная выпуклая рамка
border: 12px outset #999;
5.2. Границы фрейма. HTML, XHTML и CSS на 100%
5.2. Границы фрейма
Обращаю ваше внимание на то, что в описанном выше примере каждый фрейм имеет границу (см. рис. 5.1). Границей фрейма можно управлять, как и любыми другими элементами фрейма. Для этого существует несколько атрибутов элемента FRAMESET, позволяющих настраивать границы фреймов. Ширина границы определяется атрибутом border. По умолчанию значение ширины границы равно пяти. Чтобы граница фрейма отсутствовала, необходимо либо указать значение ширины границы равным нулю, либо присвоить значение no или 0 атрибуту frameborder. Данный атрибут может принимать только два противоположных значения. Если значение атрибута frameborder равно yes или 1, то граница фреймов будет отображаться, если 0 или no, то нет. Возможны конфликтные ситуации, так как значения атрибута frameborder различаются для разных браузеров. Однако эту проблему можно решить. Просто используйте дважды атрибут frameborder (<FRAMESET frameborder=»no» frameborder=»0″>), чтобы браузер выбрал себе значение по вкусу.
С помощью атрибута bordercolor определяется цвет границы фрейма, необходимо только указать код или соответствующее зарезервированное имя цвета.
В листинге 5.2 приведен пример HTML-страницы, которая содержит описанные выше атрибуты управления границей фрейма.
Листинг 5.2. Пример управления границей фреймов
<html>
<head>
<title>Эта страница содержит 4 фрейма</title>
</head>
<frameset cols=»45%,*»rows=»30%,*» border=»10″ bordercolor=»#000000″ frameborder=»1″ frameborder=»yes»>
<frame src=frame1.HTML>
<frame src=frame2.HTML>
<frame src=frame3.HTML>
<frame src=frame4.HTML>
</frameset>
</html>
На рис. 5.2 показано, как будет отображаться страница, описанная в листинге 5.2, в окне браузера Internet Explorer. Страница разделена на четыре области линиями черного цвета, за что отвечает атрибут bordercolor=»#000000″.
Рис. 5.2. Пример управления границами фреймов
Стоит отметить, что изменять границу одного из фреймов нельзя. Если же указать атрибуты, управляющие границей фреймов, в элементе FRAME (например, <FRAME src=frame1.HTML border=»10″ bordercolor=»#000000″ frameborder=»1″ frameborder=»yes»>), то браузер не проигнорирует это сообщение, а границы каждого фрейма непредсказуемо изменятся (рис. 5.3).
Рис. 5.3. Попытка изменить границы отдельного фрейма
Данный текст является ознакомительным фрагментом.Читать книгу целиком
Поделитесь на страничкеСледующая глава >
Границы между фреймами | htmlbook.ru
Граница между фреймами отображается по умолчанию и, как правило, в виде трехмерной линии. Чтобы ее скрыть используется атрибут frameborder тега <frameset> со значением 0. Однако в браузере Opera граница хоть и становится в этом случае бледной, все же остается. Для этого браузера требуется добавить framespacing=»0″. Таким образом, комбинируя разные атрибуты тега <frameset>, получим универсальный код, который работает во всех браузерах. Линия при этом показываться никак не будет (пример 13.6).
Пример 13.6. Убираем границу между фреймами
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Фреймы</title>
</head>
<frameset cols="100,*" frameborder="0" framespacing="0">
<frame src="menu.html" name="MENU">
<frame src="content.html" name="CONTENT">
</frameset>
</html>Учтите, что атрибуты frameborder и framespacing не являются валидными и не соответствуют спецификации HTML.
Если граница между фреймами все же нужна, в браузере она рисуется по умолчанию, без задания каких-либо атрибутов. Можно, также, задать цвет рамки с помощью атрибута bordercolor, который может применяться в тегах <frameset> и <frame>. Цвет указывается по его названию или шестнадцатеричному значению (пример 13.7), а толщина линии управляется атрибутом border. Браузер Opera игнорирует этот атрибут и обычно отображает линию черного цвета.
Пример 13.7. Изменение цвета границы
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Фреймы</title>
</head>
<frameset cols="100,*" bordercolor="#000080" border="5">
<frame src="menu.html" name="MENU">
<frame src="content.html" name="CONTENT">
</frameset>
</html>Атрибуты bordercolor и border тега <frameset> также не являются валидными и не признаются спецификацией HTML.
В данном примере линия между фреймами задается синего цвета толщиной пять пикселов. Линии различается по своему виду в разных браузерах, несмотря на одинаковые параметры (рис. 13.3).
| Internet Explorer | Opera | Firefox |
Рис. 13.3. Вид границы между фреймами в разных браузерах
Браузер Opera никак не изменяет цвет границы между фреймами, Internet Explorer устанавливает широкую границу практически сплошного цвета, а Firefox границу отображает в виде набора линий.