CSS3: свойство Box-Sizing / Хабр
Раньше, если мы делали div шириной и высотой 100px, добавляли padding 10px и border 10px, то получался квадрат не 100х100, а 140х140 px:Но иногда требуется, чтобы div был фиксированной ширины при любых значениях padding и border. В CSS3 нам поможет свойство box-sizing.
Использование box-sizing
У этого свойства есть два значения:
- content-box — по умолчанию, контент внутри div’а будет отображаться по-старому, т.е. как в примере выше: вместо 100х100 будет 140х140
- border-box позволяет значения padding и border вычитать из ширины и длины блока, т.е. в нашем примере div останется с фиксированными параметрами, но для контента останется 60х60 px
div {
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid #eaeaea;
box-sizing: border-box;
-moz-box-sizing: border-box; /*Firefox 1-3*/
-webkit-box-sizing: border-box; /* Safari */
}
Поддержка браузерами
Свойство box-sizing поддерживает большинство современных браузеров: Firefox 3.6+, Safari 3+, Opera 8.5+ и Internet Explorer 8+. Актуальные данные можно посмотреть на сайте caniuse.com.
Практический пример
Рассмотрим реальный пример использования свойства box-sizing. Есть меню из пяти пунктов:
<ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> </ul>
Добавим немного CSS, в т.ч. фиксированную ширину меню в 500 px и ширину каждого элемента в 100 px:
nav {
width: 500px;
margin: 50px auto 0;
height: 50px;
}
nav ul {
padding: 0;
margin: 0;
}
nav li {
float: left;
}
nav a {
display: inline-block;
width: 100px;
height: 100%;
background-color: #ccc;
color: #555;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 12pt;
line-height: 300%;
text-align: center;
}
nav a {
display: inline-block;
width: 100px;
height: 100%;
color: #555;
text-decoration: none;
font-family: Arial, sans-serif;
}
nav li:nth-child(1) a {
background-color: #E9E9E9;
border-left: 0;
}
nav li:nth-child(2) a {
background-color: #E4E4E4;
}
nav li:nth-child(3) a {
background-color: #DFDFDF;
}
nav li:nth-child(4) a {
background-color: #D9D9D9;
}
nav li:nth-child(5) a {
background-color: #D4D4D4;
border-right: 0;
}
Меню выглядит нормально:
Но при добавлении левого или правого border’а последний пункт меню съезжает, потому что не помещается:
nav a {
border-left: 1px solid #aaa;
border-right: 1px solid #f3f3f3;
}
Но если использовать box-sizing, то этой проблемы нет:
nav a {
border-left: 1px solid #aaa;
border-right: 1px solid #f3f3f3;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
демо
Полезное чтиво по теме
— Box-sizing: border-box — FTW — Paul Irish
box-sizing — Веб-технологии для разработчиков
CSS свойство box-sizing определяет как вычисляется общая ширина и высота элемента.
По умолчанию в блоковой модели CSS ширина и высота, которую вы задаёте элементу применяется только для контента элемента. Если у элемента есть граница или внутренний отступ, то они добавляются к ширине и высоте, чтобы получить отображаемый на экране размер. Это значит, что когда вы выставляете ширину и высоту, вам придётся изменять значение, при добавлении границ и отступов. Например, если у вас есть четыре блока с width: 25%; , и у какого-нибудь из них есть граница или внутренний отступ слева или справа, то по умолчанию они не поместятся на одной строке.
Свойство box-sizing может изменять это поведение:
content-boxдаёт стандартное поведение свойства box-sizing. Если вы выставите элементу ширину 100 пикселей, то ширина его контента будет 100 пикселей, а ширина границ и внутренних отступов при рендере будет добавлена к финальной ширине, делая элемент шире ста пикселей.border-boxговорит браузеру учитывать любые границы и внутренние отступы в значениях, которые вы указываете в ширине и высоте элемента. Если вы выставите элементу ширину 100 пикселей, то эти 100 пикселей будут включать в себя границы и внутренние отступы, а контент сожмётся, чтобы выделить для них место. Обычно это упрощает работу с размерами элементов.
Примечание: Часто выставление box-sizing: border-box полезно для размещения элементов. Оно сильно упрощает работу с размерами элементов, и как правило устранаяет ряд подводных камней, на которые вы можете наткнуться, размещая контент. С другой стороны, используя position-relative или position: absolute, box-sizing: content-box позволяет позиционным значениям быть зависимыми только от контента, а не от границ и отступов, что иногда желательно.
Синтаксис
Для свойства box-sizing устанавливается единственное ключевое слово из списка значени ниже.
Значения
content-box- Это значение по умолчанию, определенное в CSS стандарте. Свойства width и height включают исключительно контент, и не включают padding и border. Например
.box {width: 350px; border: 10px solid black;}будет иметь ширину 370 пикселей. - Размеры элемента рассчитываются следующим образом: width = ширина контента, и height = высота контента. (Границы и внутренние отступы не включаются в вычисление.)
border-box- Свойства width и height включают контент, внутренний отступ и границы, но не включают внешний отступ. Заметьте, что внутренний отступ и граница будут внутри блока. Например,
.box {width: 350px; border: 10px solid black;}будет иметь общую ширину 350 пикселей, а ширина контента составит 330 пикселей. Размер контента не может быть отрицательным, минимальное значение — 0, поэтомуborder-boxневозможно использовать для скрытия элемента. - Размеры элемента рассчитываются следующим образом: width = граница + внутренний отступ + ширина контента, и height = граница + внутренний отступ + высота контента.
Формальный синтаксис
content-box | border-box
Примечание: Значение padding-box устарело
Пример
Этот пример показывает как разные значения box-sizing изменяют видимый размер двух идентичных элементов.
HTML
<div>Content box</div> <br> <div>Border box</div>
CSS
div {
width: 160px;
height: 80px;
padding: 20px;
border: 8px solid red;
background: yellow;
}
.content-box {
box-sizing: content-box;
/* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
Content box width: 160px
Content box height: 80px */
}
.border-box {
box-sizing: border-box;
/* Total width: 160px
Total height: 80px
Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}Результат
Спецификации
Совмествимость с браузерами
Update compatibility data on GitHub| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome для Android | Firefox для Android | Opera для Android | Safari on iOS | Samsung Internet | |
box-sizing | Chrome Полная поддержка 10
| Edge Полная поддержка 12
| Firefox Полная поддержка 29
| IE Полная поддержка 8
| Opera Полная поддержка 7 | Safari Полная поддержка 5.1
| WebView Android Полная поддержка 4
| Chrome Android Полная поддержка 18
| Firefox Android Полная поддержка 29
| Opera Android Полная поддержка 14
| Safari iOS Полная поддержка 6
| Samsung Internet Android Полная поддержка 1.0
|
padding-box УстаревшаяНестандартная | Chrome Нет поддержки Нет | Edge Нет поддержки Нет | Firefox Нет поддержки 1 — 50 | IE Нет поддержки Нет | Opera Нет поддержки Нет | Safari Нет поддержки Нет | WebView Android Нет поддержки Нет | Chrome Android Нет поддержки Нет | Firefox Android Нет поддержки 4 — 50 | Opera Android Нет поддержки Нет | Safari iOS Нет поддержки Нет | Samsung Internet Android Нет поддержки Нет |
Легенда
- Полная поддержка
- Полная поддержка
- Н
Свойство border-width — толщина границы
Свойство border-width задает толщину границы для всех сторон одновременно или отдельно для каждой стороны. Является свойством-сокращением для свойств border-left-width, border-right-width, border-top-width, border-bottom-width.
Значением свойства служат любые единицы для размеров, кроме процентов, либо ключевые слова thin (граница в 2 пикселя), medium (граница в 4 пикселя) или thick (граница в 6 пикселей). Значение по умолчанию: medium.
Синтаксис
селектор {
border-width: 1, 2, 3 или 4 значения;
}
Количество значений
Свойство может принимать 1, 2, 3 или 4 значений, указываемых через пробел:
| Количество | Описание |
|---|---|
| 1 | Тип для всех сторон одновременно. |
| 2 | Первое значение для верха и низа, второе — для левой и правой границ. |
| 3 | Первое значение для верха, второе — для левой и правой границ, третье — для нижней. |
| 4 | Первое значение для верхней границы, второе — для правой, третье — для нижней, четвертое — для левой границы. |
Пример
Зададим границу толщиной в один пиксель:
<div></div> #elem {
border-width: 1px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Пример
Зададим границу толщиной в 4 пикселя:
<div></div> #elem {
border-width: 4px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Пример
Зададим толщину верхней и нижней границы в 1px, а правой и левой — в 4px:
<div></div> #elem {
border-width: 1px 4px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Пример
Зададим толщину верхней границы в 1px, правой и левой — в 4px, а нижней в 6px:
<div></div> #elem {
border-width: 1px 4px 6px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Пример
Зададим толщину верхней границы в 1px, правой в 4px, нижней — в 6px, а левой в 8px:
<div></div> #elem {
border-width: 1px 4px 6px 8px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Пример
Зададим толщину границы ключевым словом thin:
<div></div> #elem {
border-width: thin;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Пример
Зададим толщину границы ключевым словом medium:
<div></div> #elem {
border-width: medium;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Пример
Зададим толщину границы ключевым словом thick:
<div></div> #elem {
border-width: thick;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Пример
Зададим разную границу для разных сторон:
<div></div> #elem {
border-width: 1px 2px 3px 4px;
border-style: dashed dotted solid double;
border-color: red blue green black;
width: 300px;
height: 100px;
}
:
Смотрите также
- свойство border-style,
которое задает внешний вид границы - свойство border-color,
которое задает цвет границы - свойство border,
которое является свойством-сокращением для границы
CSS-свойство для управления размерами — учебник CSS
В предыдущем уроке мы рассказывали, по какому принципу традиционно вычисляется ширина и высота элемента. Фактическую ширину/высоту образует сумма значений width/height, padding, border и margin.
Нередко в процессе верстки возникает необходимость управлять стандартным вычислением размеров элемента. Допустим, вы хотите, чтобы ширина определенного блока <div> составляла 50% от ширины веб-страницы. Для этого вы задаете свойству width значение 50%. И здесь возникает загвоздка: если у блока имеются отступы (padding), поля (margin) либо рамка (border), то они будут считаться отдельно. В итоге ширина блока будет более 50%, а это уже не входит в ваши планы.
Как же сделать так, чтобы браузер учитывал отступы, а иногда и рамку, вычисляя ширину блока? На помощь приходит свойство box-sizing, которое может принимать три значения, а именно:
content-box— значение по умолчанию (поведение, описанное выше). Ширина и высота элемента определяется только свойствамиwidthиheight.border-box— в данном случае браузер включает отступыpaddingи рамкуborderв общую ширину/высоту элемента. Это значит, что если для блока задана ширина, скажем,width: 50%, отступы (например,padding-left: 10pxиpadding-right: 10px) и рамка (border-width: 1px), то браузер будет считать эти отступы и рамку частью ширины 50%. Ширина самого содержимого составит 50% минус 22 пикселя. Обратите внимание, что значения margin включены НЕ будут.padding-box— это значение похоже на предыдущее, только в ширину/высоту элемента будут включены только отступыpadding, без рамки. Значения margin также не учитываются. Значение padding-box было исключено из спецификации CSS, однако оно все еще поддерживается браузером Firefox.
Box-sizing: кроссбраузерность
Чтобы свойство box-sizing работало в браузерах Firefox, а также старых версиях Safari, Chrome и Android, следует записывать несколько его вариаций, используя соответствующие префиксы производителя:
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
Что же насчет поддержки браузером Internet Explorer? Хорошие новости: box-sizing работает в IE8 и выше.
Итак, CSS-свойство box-sizing поддерживается почти всеми браузерами, кроме IE6 и IE7. Это 97% используемых браузеров, согласно данным с сайта Caniuse. И если у вас нет необходимости в поддержке двух старых версий IE, вы можете смело использовать это свойство (но не забудьте про префиксы!).
Далее в учебнике: контент, выходящий за пределы необходимой области, и свойство overflow, решающее данную проблему.
Изучаем CSS: свойство border (с примерами)
Перевод статьи «CSS border with examples tutorial».
Всем привет! Сегодня мы поговорим о… границах!
CSS-свойством border вы, вероятно, пользуетесь практически ежедневно (если, конечно, занимаетесь фронтендом).
Я нашел несколько полезных приемов использования свойства border, которыми хочу поделиться с вами. Польза их неравнозначна: одни явно полезнее других, а некоторые просто забавные.
1. Анимированный border
Допустим, нам нужно сделать какой-то элемент более заметным. Как быть? Давайте анимируем его!
Мы можем анимировать границы, даже не меняя размеры самих элементов. Это очень просто. Все, что нужно, это использовать соответствующий параметр в CSS-коде. Давайте посмотрим пример:
See the Pen CSS Borders 1# Animated Border by Duomly programming courses (@duomly) on CodePen.
2. Границы элемента, обозначенные изображениями
Можете представить себе границу элемента в виде пончиков? А ведь ее без труда можно сделать на чистом CSS. Для этого нужно использовать атрибут border-image.
See the Pen CSS Borders 2# Border images by Duomly programming courses (@duomly) on CodePen.
3. Граница в «змеином» стиле
Если нам нужно, чтобы граница элемента прямо бросалась в глаза, можно сделать ее двухцветной. Цвета при этом можно выбирать по вкусу.
See the Pen CSS Borders 3# Snake style border by Duomly programming courses (@duomly) on CodePen.
4. Ступенчатая граница
Вы когда-нибудь пробовали создать border в 3d-стиле? Добавить элементу глубину за счет применения разных оттенков одного цвета очень легко. Для этого нам понадобятся несколько box-shadow:
See the Pen CSS Borders 4# Stairs style border by Duomly programming courses (@duomly) on CodePen.
5. CSS-border, состоящий из одной лишь тени
Иногда бывает нужно обозначить границу в уже готовом дизайне. Но добавить в него несколько дополнительных пикселей может быть проблематичным. Из-за этого могут нарушиться позиции элементов.
Мучениям пришел конец!
Мы можем создать границу вокруг нашего элемента при помощи box-shadow. Посмотрите, как это реализовано в примере:
See the Pen CSS Borders 5# Only shadows border by Duomly programming courses (@duomly) on CodePen.
6. Граница с тенью и контуром
Создать «змеиный» стиль границы можно несколькими способами. Например, применяя свойства box-shadow и outline в CSS-коде нашего элемента.
See the Pen CSS Borders 6# Shadow and outline by Duomly programming courses (@duomly) on CodePen.
7. Несколько теней и контур
В одной границе можно сочетать даже несколько цветов и элементов. Такой эффект достигается применением все тех же свойств box-shadow и outline. Давайте немного поэкспериментируем:
See the Pen CSS Borders 7# Few shadows and outline by Duomly programming courses (@duomly) on CodePen.
8. Двойной border с box-shadow
Мы можем смешать границу как таковую с тенью и контуром. Таким образом можно создать прекрасный эффект пунктира, как в примере ниже.
See the Pen CSS Borders 8# Duoble border and outline by Duomly programming courses (@duomly) on CodePen.
9. Разноцветная граница
Что, если мы хотим раскрасить границу элемента еще сильнее, чем в предыдущих примерах? Можно установить разные цвета для всех сторон. Для этого нам нужно поработать с фоном и градиентом.
See the Pen CSS Borders 9# Multi color border by Duomly programming courses (@duomly) on CodePen.
Тестируйте, экспериментируйте и делитесь в комментариях собственными рецептами оформления границ.
Бордеры в CSS — основы и примеры
Привет, друзья мои!
Опять давненько не писал интересного в свой блог, так как накопилось много дел и работы. Но сегодня решил отметиться новой статьей о границах блоков (и не только) в HTML.
Какими они бываю, какие стили используют, как цвет и толщина влияет на отображение в браузере — все эти вопросы мы осветим в этой статье.
Погнали, короче!
Каждый элемент HTML может быть снабжен границей (бордером, от английского border), которая задается через CSS, использую один из десяти стилей: none , hidden , solid , dashed , dotted , groove , ridge , double , inset и outset. Также есть еще три стиля границ: wave , dot-dash и dot-dot-dash, но их еще не поддерживает ни один из современных браузеров на момент написания поста.
Толщина границ в CSS обычно задается пикселях (px), также как и практически все единицы в дизайне сайта. С технической точки зрения border-width может быть задан любой единицей измерения, поддерживаемые браузером, за исключением процентов. Цвет границы также может быть определен любым цветом, изпользуемым в CSS, а также допускается возможность полупрозрачных границ.
Наиболее распространенный способ определения границ задается значениями, разделенных пробелами:
border: style thickness color; (стиль, толщина границы, цвет границы)
В примерах ниже я добавил небольшой border-radius, чтобы показать, как проявляются стили в кривой.
border: 4px solid #222
border: 4px dashed #222
border: 4px dotted #222
border: 4px groove #222
border: 4px ridge #222
border: 4px double #222
border: 4px inset #222
border: 4px outset #222
Вы заметили, что стиль double особенно чувствителен к толщине, распределяя сумму заданного значения между внутренним и внешним краями и пространством между ними. Ridge и groove являются так же чувствительны к цвету, используя производные оттенки тона, установленного значения для внутренней и внешней кромки. По этой причине, используйте «чистые» цвета: белый, черный а некоторые оттенки — вообще не рекомендуется использовать, так как это снижает способность браузера, чтобы создать достойный визуальный эффект. Inset и outset аналогичным образом ограничены, и выглядят «фальшиво» если значение толщины линии задано слишком мало.
Границы могут быть применены к каждой стороне элемента по отдельности, например border-left, border-bottom и т.д., используя тот же синтаксис CSS. Это может быть разбито и дальше: border-right-color и border-left-width и т.д.
Для этого приведу один пример, где уровень детализации можно было бы использовать на странице, создавая рамку Polaroid для фотографии с границами, как это показано в самом низу этой статьи (в которой толщина нижнего края отличается от других трех сторон), задается с помощью следующих стилей CSS:
img.polaris {
border: 25px solid #e8e8d3;
border-bottom-width: 50px;
}
Если говорить честно, SVG имеет гораздо больший контроль над стилями границ, но мне нужно будет оставить это для другой статьи.
Спасибо за внимание, други! Буду надеятся что статья вам понравилась. Но если вдруг у вас появились вопросы по границам блока — не стесьняйтесь и задавайте их в комментариях.
До скорой встречи!
Навигация по записям
Юрич:
Занимаюсь созданием сайтов на WordPress более 6 лет. Работал в нескольких веб-студиях, да и сейчас работаю. Иногда подрабатываю на фрилансе, как на нашем так и на зарубежном. Везде зарекомендовал себя очень хорошо. Если нужен сайт на WordPress, шаблон для сайта или лендинг — не стесняйтесь — пишите. Рад буду помочь!
Не забудьте подписаться на обновления:
Похожие записи
Оставить свой комментарий
CSS Граница Özelliği
CSS граница özelliği bir HTML elementinin kenar / sınır çizgisinin kalınlığını, şeklini, rengini ayarlamaya yarar.
Bir HTML Elementinin 4 kenarına da çizgi çekilebilir. Bu çizgiler birbirinden bağımsız, farklı özelliklere sahip olabilir.
Örnek bir border: Bu
etiketinin border özellikleri border: 1px solid # ff0000
Kenar Çizgisi Stilleri (пограничный стиль)
пограничный стиль kenar belirtikisinin.Бу çizgi düz, noktalı, parçalı çizgili ve daha pek çok stilde olabilir.
border-style özelliği şu değerleri alabilir:
- пунктирная — Noktalı çizgi
- пунктирная — Kesik çizgilerden oluşan çizgi
- solid — Düz çizgilerden oluşan çizgi
- solid — Düz çizgiler çizgi 900Ç25 — Düz çizgiler çizgi 900Ç25 Bu efekt border rengine göre ortaya çıkar.
- хребет — ıkıntılı çizgi. Bu efekt border rengine göre ortaya çıkar.
- вставка — İçe doğru 3 boyutlu görünen çizgi.Bu efekt border rengine göre ortaya çıkar.
- начало — Dışa doğru 3 boyutlu çizgi. Bu efekt border rengine göre ortaya çıkar.
- нет — Kenar çizgisi yok
- hidden- Gizli kenar çizgisi
border-style özelliğine atanan bu değerler şu şekilde görüntülenir:
000
000
000
000
000
000 с двумя точками врезка
исход
Бордюр
Бордюр Гизли
Бордюр Каришик
Örnek
Бордюр Özelliği
Border yani sınır / kenar çizgisinin nasıl görüntüleneceğini belirler:
пунктирный
пунктир
твердый
двойной
паз
гребень
вставка
начало
Бордюрный кокетник
Граница Гизли
Karışık border
Kendin Dene »
Kenar Çizgisi Genişliği (border-width)
CSS border-width özelliği kenar çizgisinin kalınlığını belirler.
пикселей, точка, см, em gibi farklı birimler ile genişlik özelliği verilebildiği gibi, тонкий (ince), средний (orta), толстый (kalın) gibi önceden tanımlanmış kalınlık isimleri de kalınlık isimleri.
ширина границы: 1px şeklinde kullanıldığında 4 kenar da 1px kalınlığında olacaktır.
border-width: 5px 10px 15px 20px şeklinde tanımlandığında üst 5px, sağ 10px, alt 15px, sol 20px kalınlığında olacaktır.
Орнек
<стиль>
п.bir {
стиль границы: твердый;
ширина границы: 5 пикселей;
}
p.iki {
стиль границы: твердый;
ширина границы: средний;
}
p.uc {
стиль границы: пунктирная;
ширина границы: 3px 6px 9px 12px;
}
Kendin Dene »
Kenar Çizgisi Rengi (border-color )
CSS border-color özelliği ile kenar çizgisinin rengi ayarlanabilir.
бордюрный цвет özelliği şu tür değerler alabilir:
- Renk ismi (красный, синий, желтый гиби)
- Hex değerler (# ffcc44 gibi)
- RGB deerler (rgb (255,0) gibi)
- прозрачный
цвет рамки: красный değeri verilirse 4 çizgi de kırmızı olur.
цвет границы: красный синий желтый зеленый gibi kullanılırsa 4 çizgi de farklı renk olur.
Орнек
<стиль>
p.bir {
стиль границы: твердый;
цвет границы: красный;
}
p.iki {
стиль границы: твердый;
цвет границы: # 00ff00;
}
p.uc {
стиль границы: твердый;
цвет границы: красный зеленый синий желтый;
}
Kendin Dene »
Kenar Çizgisi Kısa Yazım
border özelliği şu şekilde kullanılabilir: border: 1px сплошной красный bu yazım kısa yaz.Uygulanan элемент 1px kalınlığında, düz ve kırmızı renkli sınır çizgisine sahip olur.
граница: kalınlık stil renk şeklinde kullanılır.
Dilerseniz tek bir taraf için (sağ, sol, alt, üst gibi) kenar çizgisinin stilini belirleyebilirsiniz:
Örnek
p {
border-left: сплошной желтый цвет 6 пикселей;
цвет фона: # 1f1f1f;
}
Kendin Dene »
Eğer bu şekilde tek bir kenar stillendirilecekse;
-
граница слеваsol çizgi -
граница справаsağ çizgi -
граница сверхуüst çizgi -
граница снизуalt çizgi
ile biçimlendirilebilir.
Yuvarlak Kenar izgileri (border-radius)
CSS border-radius özelliği kenar çizgilerini yuvarlatmak için kullanılır.
Örnek
п.юварлак1 {
граница: сплошной красный 2px;
радиус границы: 4 пикселя;
}
p.yuvarlak2 {
граница: 2 пикселя сплошного синего цвета;
радиус границы: 10 пикселей;
} Кендин Дене »
Добавить рамку к таблице
В зависимости от программы, которую вы используете, вы можете добавить границу к таблице с помощью галереи стилей границ, вы можете применить заранее разработанный стиль таблицы или создать свою собственную границу.
Слово
Самый быстрый способ добавить границы в Word — из галереи стилей границ.
Щелкните таблицу, а затем щелкните ручку перемещения таблицы , чтобы выбрать таблицу.
Появится вкладка Table Tools Design . (В Office для Mac появляются вкладки Table Design и Layout .Щелкните вкладку Table Design .)
Щелкните Стили границ и выберите стиль границы.
Щелкните Borders и выберите, где вы хотите добавить границы.
Совет: Чтобы изменить или добавить границы для части таблицы, убедитесь, что выбран Border Painter , а затем в таблице щелкните каждую границу, которую вы хотите изменить или добавить.Word применяет стиль границы, который вы уже выбрали, и вам не нужно сначала выбирать таблицу.
Применение заранее разработанного стиля стола — еще один быстрый способ выделить ваш стол. Стили таблицы добавляют согласованные границы, затенение и форматирование текста.
Щелкните внутри таблицы, а затем щелкните вкладку Table Tools Design (вкладка Table Tools в Office для Mac).
В галерее Стили таблиц щелкните стиль таблицы. Чтобы увидеть другие стили галереи, щелкните стрелку Еще . (Эта стрелка отображается под галереей в Office для Mac.)
Чтобы создать собственную границу, выберите цвет, ширину, стиль линии и место, где вы хотите применить границы.
В Word или Outlook щелкните таблицу, а затем щелкните маркер перемещения таблицы , чтобы выбрать таблицу.
В PowerPoint щелкните в любом месте внешней границы таблицы, чтобы выделить ее. (Маркер перемещения таблицы не отображается в PowerPoint.)
Щелкните вкладку Table Tools Design (вкладка Table Tools в Office для Mac).
Создайте свой бордюр.
Щелкните Стиль линии ( Стиль пера в PowerPoint) и выберите стиль.
Щелкните Толщина линии ( Толщина пера в PowerPoint) и выберите нужную ширину границы.
Щелкните Цвет пера и выберите цвет.
Щелкните Borders и выберите нужные границы.
Совет: Чтобы изменить или добавить границы для части вашей таблицы, убедитесь, что выбран Border Painter , а затем щелкните каждую границу в таблице.Word добавляет рамку в стиле, ширине и цвете, которые вы уже выбрали, и вам не нужно предварительно выбирать таблицу.
PowerPoint
Применение заранее разработанного стиля стола — быстрый способ выделить ваш стол среди других. Стили таблицы добавляют согласованные границы, затенение и форматирование текста.
Щелкните внутри таблицы, а затем щелкните вкладку Table Tools Design (вкладка Table Tools в Office для Mac).
В галерее Стили таблиц щелкните стиль таблицы. Чтобы увидеть другие стили галереи, щелкните стрелку Еще . (Эта стрелка отображается под галереей в Office для Mac.)
Чтобы создать собственную границу, выберите цвет, ширину, стиль линии и место, где вы хотите применить границы.
В Word или Outlook щелкните таблицу, а затем щелкните маркер перемещения таблицы , чтобы выбрать таблицу.
В PowerPoint щелкните в любом месте внешней границы таблицы, чтобы выделить ее. (Маркер перемещения таблицы не отображается в PowerPoint.)
Щелкните вкладку Table Tools Design (вкладка Table Tools в Office для Mac).
Создайте свой бордюр.
Щелкните Стиль линии ( Стиль пера в PowerPoint) и выберите стиль.
Щелкните Толщина линии ( Толщина пера в PowerPoint) и выберите нужную ширину границы.
Щелкните Цвет пера и выберите цвет.
Щелкните Borders и выберите нужные границы.
Совет: Чтобы изменить или добавить границы для части вашей таблицы, убедитесь, что выбран Border Painter , а затем щелкните каждую границу в таблице. Word добавляет рамку в стиле, ширине и цвете, которые вы уже выбрали, и вам не нужно предварительно выбирать таблицу.
Вы можете добавить собственные границы в Word или PowerPoint.
Слово
Щелкните таблицу или выберите ячейки, к которым вы хотите добавить границы.
На вкладке Таблицы в разделе Нарисовать границы щелкните Границы , а затем щелкните нужные границы.
Щелкните таблицу или выберите ячейки, в которых вы хотите добавить или изменить границы.
На вкладке Таблицы в разделе Нарисовать границы во всплывающем меню Стиль линии щелкните нужный стиль линии.
На вкладке Таблицы в разделе Нарисовать границы щелкните Границы , а затем щелкните нужные границы.
Щелкните таблицу или выберите ячейки, в которых вы хотите добавить или изменить границы.
На вкладке Таблицы в разделе Нарисовать границы во всплывающем меню Толщина линии щелкните нужный вес линии.
На вкладке Таблицы в разделе Нарисовать границы щелкните Границы , а затем щелкните нужные границы.
Щелкните таблицу или выберите ячейки, в которых вы хотите удалить границы.
На вкладке Таблицы в разделе Нарисовать границы щелкните Границы , а затем нажмите Нет .
PowerPoint
Щелкните таблицу или выберите ячейки, к которым вы хотите добавить границы.
На вкладке Таблицы в разделе Нарисовать границы щелкните стрелку рядом с полем Границы , а затем щелкните нужные границы.
Щелкните таблицу или выберите ячейки, в которых вы хотите добавить или изменить границы.
На вкладке Таблицы в разделе Нарисовать границы во всплывающем меню Стиль линии щелкните нужный стиль линии.
На вкладке Таблицы в разделе Нарисовать границы щелкните стрелку рядом с полем Границы , а затем щелкните нужные границы.
Щелкните таблицу или выберите ячейки, в которых вы хотите добавить или изменить границы.
На вкладке Таблицы в разделе Нарисовать границы во всплывающем меню Толщина линии щелкните нужный вес линии.
На вкладке Таблицы в разделе Нарисовать границы щелкните стрелку рядом с полем Границы , а затем щелкните нужные границы.
Щелкните таблицу или выберите ячейки, в которых вы хотите добавить или изменить границы.
На вкладке Таблицы в разделе Нарисовать границы щелкните стрелку рядом с полем Цвет линии , а затем щелкните нужный цвет линии.
На вкладке Таблицы в разделе Нарисовать границы щелкните стрелку рядом с полем Границы , а затем щелкните нужные границы.
Щелкните таблицу или выберите ячейки, в которых вы хотите удалить границы.
На вкладке Таблицы в разделе Нарисовать границы щелкните стрелку рядом с полем Границы , а затем щелкните Без границы .
Модуль CSS3: Граница
Модуль CSS3: ГраницаАбстракция
CSS (каскадные таблицы стилей) — это язык для описания визуализации структурированные документы (такие как HTML и XML) на экране, на бумаге, в речи, и т. д. Этот черновик описывает функциональность, предлагаемую для уровня CSS 3. для описания границ, таких как стили границ, цвета границ и изображения границ.Это включает и расширяет функциональные возможности CSS уровня 2 [CSS2], который основан на CSS уровня 1 [CSS1].
Статус этого документа
Этот документ представляет собой черновик одного из «модулей» [CSS3-intro] для предстоящей спецификации CSS3. Это не только описывает функциональность границы, которая уже существует в CSS1 и CSS2, но также предлагает новые функциональность для CSS3, а также для других языков, которым она может понадобиться.
Этот документ является рабочим проектом рабочей группы CSS, которая является частью деятельность по стилю (см. резюме).
Комментарии и обсуждения этого проекта могут быть отправлены в (заархивированный) открытый доступ. список рассылки [email protected] (см. инструкции). Члены W3C могут также отправляйте комментарии непосредственно рабочей группе CSS.
Это рабочий черновик, поэтому его можно обновить, заменить или отрендерить. устарел другими документами W3C в любое время. Неуместно использовать W3C Рабочие черновики в качестве справочного материала или цитировать их не иначе как «работа в прогресс ». Его публикация не означает одобрения со стороны членов W3C. или рабочая группа CSS (только для членов).
Патенты, относящиеся к CSS, можно найти в Рабочей Публичное раскрытие патентов Группы страница.
Чтобы найти последнюю версию этого рабочего проекта, следуйте Ссылка «Последняя версия» выше или посетите список технических отчетов W3C.
Этот документ может быть доступен в переводах в будущем. Английский версия данной спецификации является единственной нормативной версией.
1. Зависимости от других Модули CSS 3
- Общий синтаксис
- Значения и единицы, каскадирование и наследование
- Коробчатая модель
2.Контекст
Члены рабочей группы CSS предложили во время встречи в Кламаре: модульность спецификации CSS.
Эта модуляризация и экстернализация общего синтаксиса CSS уменьшит размер спецификации и позволит использовать новые типы спецификации использования селекторов и / или общего синтаксиса CSS.
Эта спецификация будет содержать собственные тестовые примеры, один тест на концепцию, представленную в этом документе. Этих тестов не будет полные тесты на соответствие, но они предназначены для того, чтобы предоставить пользователям способ проверьте, реализована ли часть этой спецификации минимум минимум либо нет, либо, наоборот, не реализовано.
3. Граница
3.1 Свойства ‘border-color’
| Имя: | цвет верхней границы , цвет правой границы , цвет нижней границы , цвет левой границы |
| Значение: | <цвет> |
| Начальный: | значение свойства ‘цвет’ |
| Применимо: | все элементы |
| Унаследовано: | нет |
| В процентах: | НЕТ |
| Медиа: | визуальный |
| Расчетное значение: | <цвет> |
| Имя: | цвет рамки |
| Значение: | <цвет границы> {1,4} |
| Начальный: | (см. Отдельные свойства) |
| Применимо: | все элементы |
| Унаследовано: | нет |
| В процентах: | НЕТ |
| Медиа: | визуальный |
| Расчетное значение: | Посмотреть отдельные свойства |
«Border-color» — это сокращение от четырех «border — * — color» свойства.
Когда цвет границы «прозрачный», виден только фон.
Фон элемента выходит за пределы области границы. См. Свойство background.
3.2 Свойства стиля границы
| Имя: | стиль границы сверху , стиль границы справа , стиль границы снизу , стиль границы слева |
| Значение: | <стиль границы> |
| Начальный: | нет |
| Применимо: | все элементы |
| Унаследовано: | нет |
| В процентах: | НЕТ |
| Медиа: | визуальный |
| Расчетное значение: | указанное значение |
| Имя: | граница |
| Значение: | <стиль границы> {1,4} |
| Начальный: | (см. Отдельные свойства) |
| Применимо: | все элементы |
| Унаследовано: | нет |
| В процентах: | НЕТ |
| Медиа: | визуальный |
| Расчетное значение: | Посмотреть отдельные свойства |
<стиль-границы> равно ‘none | скрытый | пунктирная | пунктирная | твердый | двойной | точка-тире | точка-точка-тире | волна | паз | гребень | вставка | начало », с следующие значения:
- нет
- Без рамки.Цвет и ширина игнорируются (т.е. ширина границы равна 0).
- скрыто
- То же, что «нет», но имеет другое поведение при разрешении конфликтов правила для таблиц [ref].
- пунктирная
- Ряд точек.
- штриховые
- Серия тире.
- твердый
- Отдельный линейный сегмент.
- двойной
- Две параллельные сплошные линии с небольшим промежутком между ними.(Толщина строки не указаны, но сумма строк и пробела должны быть равны ‘ширина рамки’.)
- точка-тире
- Чередование точек и тире.
- точка-точка-тире
- Две точки и тире.
- волна
- Волнистая линия.
- паз
- Похоже, он вырезан на холсте. (Обычно это достигается создание «тени» из двух цветов, которые немного светлее и темнее, чем цвет границы.)
- гребень
- Похоже, он выходит из холста.
- вставка
- Похоже, что содержимое внутри рамки утоплено в холст. Различное значение элементов table [ref].
- начало
- Похоже, что содержимое внутри рамки выходит из холст. Различное значение для элементов table [ref].
«Стиль границы» — это сокращение, которое устанавливает четыре «стиля границы — * -» свойства.
Примечание. Нет возможности контролировать расстояние между точками и тире, ни по длине тире. Реализациям рекомендуется выберите интервал, который сделает углы симметричными.
Примечание. В данной спецификации не определяется, как границы разные стили должны быть соединены в углу. Также обратите внимание, что округленное углы могут привести к перекрытию углов и содержимого, если заполнение меньше радиуса угла.
3.3 Свойства ‘border-radius’
| Имя: | граница-верхний-правый-радиус , граница-нижний-правый-радиус , граница-нижний-левый-радиус , граница-верх-левый-радиус , граница-радиус |
| значение: | <длина> <длина> ? |
| Начальный: | 0 |
| Применимо: | все элементы |
| Унаследовано: | нет |
| В процентах: | НЕТ |
| Медиа: | визуальный |
| Расчетное значение: | указанные значения |
Два значения длины свойства ‘border-radius’ определяют радиусы четверти эллипса, определяющего форму угла (см. схему ниже).Первое значение — это горизонтальный радиус (или вертикальный, если ‘writing-mode’ вертикальный). Если вторая длина опущен, он равен первому (таким образом, угол равен четверти круг). Если любая длина равна нулю, угол будет квадратным, а не закругленным. В радиус границы также приводит к округлению фона элемента (даже если граница — «нет»). Отрицательные значения не допускаются.
3.4 Изображение границы properties
Свойства изображения рамки позволяют автору назначать изображения рамкам.Существует четыре группы свойств изображения границ:
- Определение изображений границ
- Эти свойства используются для указания URI изображения границы.
- Подгонка изображений рамки
- Эти свойства используются, чтобы указать, как изображение (я) вписывается в область границы.
- Преобразование изображений границ
- Эти свойства используются для отражения или поворота изображений одной стороны или угла.
Свойства изображения границы переопределяют свойства стиля границы.
3.4.1 Свойства ‘border-image’
Изображение границы указывается как URI для двух разных групп:
- Изображения границ
- URI до трех изображений можно указать для каждого из четырех краев границы. Если указан один URI изображения, первая плитка центрируется на линии границы. Если даны два URI изображения, они встречаются в центре линии границы с первым изображением, размещенным вверху или слева от центра.Если даны три URI изображения, второй становится центром и не разбивается на мозаику. Два других помещаются по обе стороны от центрального изображения, причем первое идет вверху или слева от центра, а третье — внизу или справа.
- Границы угловых изображений
- Для каждого из четырех углов границы могут быть указаны отдельные изображения. Внешний угол изображения выравнивается с внешним углом угловой области границы. Если для изображения угла границы установлено значение «Продолжить», то изображение не назначается, и область изображения границы простирается через угловую область до края границы.Две стороны обрезаны под углом, чтобы образовался скошенный угол. Площадь угла определяется радиусами перпендикулярных углов и линиями внешних границ или продолжением перпендикуляров от угла кромки заполнения, в зависимости от того, что дает большую площадь.
| Имя: | border-top-image , border-right-image , border-bottom-image , border-left-image |
| Значение: | |
| Начальный: | нет |
| Применимо: | все элементы |
| Унаследовано: | нет |
| В процентах: | НЕТ |
| Медиа: | визуальный |
| Расчетное значение: | указанные значения |
| Имя: | граница изображения |
| Значение: | [ |
| Начальный: | нет |
| Применимо: | все элементы |
| Унаследовано: | нет |
| В процентах: | НЕТ |
| Медиа: | визуальный |
| Расчетное значение: | указанное значение |
«border-image» — это сокращение для свойств «border-top-image», «border-right-image», «border-bottom-image» и «border-left-image».
| Имя: | border-top-left-image , border-top-right-image , border-bottom-right-image , border-bottom-left-image |
| Значение: | |
| Начальный: | продолжить |
| Применимо: | все элементы |
| Унаследовано: | нет |
| В процентах: | НЕТ |
| Медиа: | визуальный |
| Расчетное значение: | указанные значения |
| Имя: | граница-угол-изображение |
| Значение: | [ |
| Начальный: | продолжить |
| Применимо: | все элементы |
| Унаследовано: | нет |
| В процентах: | НЕТ |
| Медиа: | визуальный |
| Расчетное значение: | указанное значение |
‘border-corner-image’ — это сокращенное свойство для ‘border-top-left-image’, ‘border-top-right-image’, ‘border-bottom-right-image’ и ‘border- свойства нижнего левого изображения.
Пример выполнения обрамления из восьми изображений.
3.4.2 Свойства «подгонки границы»
Свойства подгонки границы определяют, будут ли и как изображения границы будут мозаичными. Значения следующие:
- зажим
- Разместите одну плитку без масштабирования и закрепите переполнение.
- повтор
- Повторяйте изображение, пока оно не заполнит область границы, и обрежьте любое переполнение.
- шкала
- Повторите изображение как можно ближе к заполнению области и масштабируйте все плитки вверх или вниз по мере необходимости, чтобы заполнить область без переполнения.
- растяжка
- Растяните (или уменьшите) изображение так, чтобы одна плитка покрывала всю область.
- перезаписать
- Разместите отдельную плитку без масштабирования и не обрезайте переполнение.
- перелив
- Повторите изображение столько раз, сколько необходимо, чтобы заполнить область и не обрезать переполнение.
- пространство
- Повторите изображение как можно ближе к заполнению области, не выходя за границы, и расположите изображения так, чтобы мозаика точно заполнила область.
Свойства подгонки границы сгруппированы в свойства «подгонка границы» и «ширина подгонки границы». Свойства ‘border-fit-length’ определяют обработку изображения по длине границы, то есть по горизонтали для верхней и нижней границ и по вертикали для левой и правой границ. Свойства ‘border-fit-width’ определяют обработку изображения по ширине границы, то есть по вертикали для верхней и нижней границ и по горизонтали для левой и правой границ.
Для значений перезаписи и переполнения в соответствии с границами изображение может выходить за пределы области содержимого, но оно должно быть обрезано на противоположном крае области содержимого.
| Имя: | граница, верхняя, длина , граница, правая, длина , граница, нижняя, подходят, длина , граница, левая, подходят, длина , border-top-fit-width , border-right-fit-width , border-bottom-fit-width , border-left-fit-width |
| Значение: | [зажим | повторить | масштаб | растянуть | перезаписывать | переполнение | пробел] {1,2} |
| Начальный: | повторить |
| Применимо: | все элементы |
| Унаследовано: | нет |
| В процентах: | НЕТ |
| Медиа: | визуальный |
| Расчетное значение: | указанные значения |
Если в свойстве border-image указано центральное изображение, то к этому изображению применяется второе значение.В противном случае игнорируется.
| Имя: | длина по краю , ширина по краю |
| Значение: | |
| Начальный: | повторить |
| Применимо: | все элементы |
| Унаследовано: | нет |
| В процентах: | НЕТ |
| Медиа: | визуальный |
| Расчетное значение: | указанные значения |
| Имя: | по краю |
| Значение: | |
| Начальный: | повторить |
| Применимо: | все элементы |
| Унаследовано: | нет |
| В процентах: | НЕТ |
| Медиа: | визуальный |
| Расчетное значение: | указанные значения |
Второе значение в ‘border-fit’, если присутствует, применяется к ширине.Если есть только одно значение, устанавливается и ширина границы, и длина границы.
| Имя: | граница-верхняя-левая-подходящая-длина , -граница-верх-права-подходящая-длина , граница-нижняя-правая-подходящая-длина , граница-нижняя-левая-подходящая-длина , border-top-left-fit-width , border-top-right-fit-width , border-bottom-right-fit-width , border-bottom-left-fit-width |
| Значение: | [зажим | повторить | масштаб | растянуть | перезаписывать | переполнение | пробел] {1,2} |
| Начальный: | перезаписать |
| Применимо: | все элементы |
| Унаследовано: | нет |
| В процентах: | НЕТ |
| Медиа: | визуальный |
| Расчетное значение: | указанные значения |
Эти свойства определяют обработку изображения углов границы.Если второй значение присутствует, оно относится к горизонтальному размеру.
| Имя: | граница-угол |
| Значение: | |
| Начальный: | перезаписать |
| Применимо: | все элементы |
| Унаследовано: | нет |
| В процентах: | НЕТ |
| Медиа: | визуальный |
| Расчетное значение: | указанные значения |
Если в сокращенном свойстве ‘border-corner-fit’ присутствует одно значение, оно устанавливает границу-угол-fit для всех углов.Если присутствуют два значения, второе значение применяется к горизонтальному размеру. Если присутствуют четыре значения, они устанавливают оба размера для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов соответственно.
3.4.3 Свойства ‘border-image-transform’
Эти свойства используются, чтобы указать, что изображение в углу является преобразованием изображения border-top-left-image или изображения на краю являются преобразованием граница-верхнее-изображение и граница-левое-изображение.
Возможные преобразования угловых изображений:
- нет
- Поместите изображение без изменений.
- повернуть
- Поверните изображение так, чтобы сторона, которая была бы обращена к внутреннему краю, если бы оно было помещено на верхнюю границу, оставалась обращенной к внутреннему краю.
- отражают
- Отразите изображение так, чтобы стороны, которые были бы внутренними краями изображения, если бы оно находилось в верхнем левом углу, оставались внутренними сторонами.
Возможные преобразования краевых изображений:
- нет
- Поместите изображение без изменений.
- повернуть
- Поверните изображение так, чтобы сторона, которая была бы обращена к внутреннему краю, если бы оно было помещено на верхнюю границу, оставалась обращенной к внутреннему краю.
- рефлекс-ху
- Предполагается, что изображение предназначено для верхней или левой стороны. Изображение правой границы отражается по вертикальной оси, а изображение нижней границы отражается по горизонтальной оси.
- отражатель правый
- Предполагается, что изображение предназначено для верхней границы.Изображение правой границы повернуто на 90 градусов вправо; изображение левой границы поворачивается на 90 градусов вправо и отражается по вертикальной оси. Изображение нижней границы отражается по горизонтальной оси.
- левый отражатель
- Предполагается, что изображение предназначено для верхней границы. Изображение левой границы повернуто на 90 градусов влево. Изображение правой границы поворачивается на 90 градусов влево и отражается по вертикальной оси. Изображение нижней границы отражается по горизонтальной оси.
| Имя: | border-corner-image-transform |
| Значение: | нет | повернуть | отражать |
| Начальный: | нет |
| Применимо: | все элементы |
| Унаследовано: | нет |
| В процентах: | НЕТ |
| Медиа: | визуальный |
| Расчетное значение: | указанные значения |
| Имя: | Преобразование изображения границы |
| Значение: | нет | повернуть | отражать-ху | отражать право | отражение слева |
| Начальный: | нет |
| Применимо: | все элементы |
| Унаследовано: | нет |
| В процентах: | НЕТ |
| Медиа: | визуальный |
| Расчетное значение: | указанные значения |
3.5 Преодоление границ недвижимость
| Имя: | бордюр |
| Значение: | <стиль границы> |
| Начальный: | нет |
| Применимо: | элементы с бордюром |
| Унаследовано: | да |
| В процентах: | НЕТ |
| Медиа: | визуальный |
| Расчетное значение: | указанное значение |
Когда поле с рамкой разрывается на разрыве страницы, разрыва столбца или, для встроенных элементов, при разрыве строки, граница может быть вставлена в разрыв, или границу можно оставить открытой.Стиль границы или изображение границы добавят отступ и граница в разрыве, как если бы это был нормальный конец коробки. Значение ‘none’ не будет добавлять отступ или границу в разрыв. Свойство не действует, если граница отсутствует.
3.6 Тень коробки недвижимость
| Имя: | тень |
| Значение: | нет | [ <длина> <длина> <длина> ? || <цвет> ] [, <длина> <длина> <длина> ? || <цвет> ] + |
| Начальный: | нет |
| Применимо: | все элементы |
| Унаследовано: | нет |
| В процентах: | НЕТ |
| Медиа: | визуальный |
| Расчетное значение: | абсолютные значения |
К коробке можно прикрепить одну или несколько теней.Они нарисованы просто за границу. Свойство представляет собой список теней, разделенных запятыми, каждая задается тремя значениями длины и цветом. Пропущенные длины — 0, опущены цвета равны вычисленному значению свойства «цвет».
Тени не влияют на макет: они могут перекрываться с другими прямоугольниками. Как фон и границы, если они перекрывают другие блоки, они рисуются за любым текстом или заменяемым элементом.
Три длины и цвет каждой тени интерпретируются следующим образом:
- Первая длина — это горизонтальное смещение тени.Положительное значение рисует тень, смещенную вправо от поля, отрицательную длину до слева.
- Вторая длина — это вертикальное смещение. Положительное значение смещает тень вниз, отрицательная вверх.
- Третья длина — радиус размытия. Отрицательные значения не допускаются. Если оно равно 0, тень резкая, иначе чем больше значение, тем больше тень размыта. Точный алгоритм не уточняется.
- Цвет — это цвет тени.
Если элемент имеет несколько блоков, все они получают тени, но тени рисуются только там, где также должны быть нарисованы границы, см. ‘border-break’. Если box имеет ненулевой радиус границы ‘, тень округляется таким же образом.
Вот пример отдельных слов с падающей тенью. Предположим слова были заключены в и правило стиля был
пролет {граница: тонкое твердое тело; box-shadow: 0.2em 0.2em #CCC} Результат может выглядеть так:
3.7 Граница сокращенные свойства: ‘border-top’, ‘border-bottom’, ‘border-right’, ‘border-left’ и ‘border’
| Имя: | ‘border-top’, ‘border-right’, ‘border-bottom’, ‘border-left’ |
| Значение: | [<ширина-границы> || <стиль границы> || [<цвет> | прозрачный] || |
| Начальный: | Посмотреть отдельные объекты |
| Применимо: | все элементы |
| Унаследовано: | нет |
| В процентах: | НЕТ |
| Медиа: | визуальный |
| Расчетное значение: | абсолютные значения |
Это сокращенное свойство для установки ширины, стиля, цвета и изображения верхней, правой, нижней и левой границы поля.Допущенные значения устанавливаются на свои начальные значения. Хотя свойство border-image переопределяет свойство стиля границы, но для обратной совместимости с CSS 2 и браузерами, поддерживающими сокращенные свойства границы CSS 2, авторам рекомендуется использовать:
h2 {border-bottom: толстый сплошной красный url ('lines.jpg')}
или
h2 {border-bottom: толстый непрозрачный URL ('wavyredline.jpg')}
| Имя: | ‘бордюр’ |
| Значение: | [<ширина-границы> || <стиль границы> || [<цвет> | прозрачный] || [ |
| Начальный: | Посмотреть отдельные объекты |
| Применимо: | все элементы |
| Унаследовано: | нет |
| В процентах: | НЕТ |
| Медиа: | визуальный |
| Расчетное значение: | абсолютные значения |
Свойство ‘border’ — это сокращенное свойство для установки одинаковой ширины, цвета, стиля и изображений для всех четырех границ поля.Более того, преобразование изображения границы может быть указано с изображением границы. В отличие от сокращенных свойств margin и padding, свойство border не может устанавливать разные значения на четырех границах. Для этого необходимо использовать одно или несколько других свойств границы.
Например, первое правило ниже эквивалентно набору из четырех правил, показанных после него:
p {граница: сплошной красный}
п {
border-top: сплошной красный;
граница справа: сплошной красный;
нижняя граница: сплошной красный;
border-left: сплошной красный
}
Поскольку в некоторой степени свойства перекрывают друг друга функциональность, порядок, в котором указаны правила, важный.
Рассмотрим следующий пример:
blockquote {
цвет границы: красный;
граница слева: двойной;
черный цвет
}
В приведенном выше примере цвет левой границы черный, в то время как другие границы красные. Это связано с тем, что ‘border-left’ устанавливает ширина, стиль и цвет. Поскольку значение цвета не задается свойство ‘border-left’, оно будет взято из свойства ‘color’ свойство. Тот факт, что свойство ‘color’ устанавливается после свойства ‘border-left’, не соответствующие.
4. Профили
Базовый профиль модуля границы включает поддержку следующих свойств:
- цвет рамки
- бордюрный
- радиус границы
- border-top-image, border-right-image, border-bottom-image, border-left-image (только одно изображение с каждой стороны) и сокращенное изображение границы
- Граница сокращений
5. Соответствие
В этом разделе определяется соответствие только настоящей спецификации.
Неспособность пользовательского агента реализовать часть этой спецификации из-за ограничениям конкретного устройства не означает несоответствия.
Пользовательские агенты должны соблюдать правила обработки ошибок синтаксического анализа.
6. Тесты
Эта спецификация будет содержать набор тестов, позволяющий агентам пользователя проверить их основное соответствие спецификации. Этот набор тестов не претендует на то, чтобы быть исчерпывающим и не охватывает все возможные комбинированные случаи Фоновая функциональность W3C.
7. Благодарности
Автор хотел бы поблагодарить fantasai за предоставление предложения по свойствам изображения границы. Автор хотел бы поблагодарить Tantek Çelik за указание на необходимость свойств преобразования изображения границы.
8. Ссылки
Нормативные ссылки
- [CSS3-box]
- Берт Бос. Модуль CSS3: коробчатая модель. 26 июля 2001. W3C работает проект.(Работа в процессе.) URL: http://www.w3.org/TR/2001/WD-css3-box-20010726
- [CSS3-каскад]
- Hkon Wium Lie. Модуль CSS3: Каскадирование и наследование. 13 Июль 2001 г. Рабочий проект W3C. (Работа в процессе.) URL: http://www.w3.org/TR/2001/WD-css3-cascade-20010713
- [CSS3-цвет]
- Тантек элик; Крис Лилли. Модуль CSS3: цвет. 5 марта 2001. Рабочий проект W3C. (Работа в процессе.) URL: http://www.w3.org/TR/2001/WD-css3-color-20010305
- [CSS3-синтаксис]
- Дэвид Барон. Модуль CSS3: синтаксис. (готовится к печати). W3C работает проект. (Работа в процессе.)
- [CSS3-значения]
- Hkon Wium Lie. Модуль CSS3: значения и единицы измерения. (готовится к печати). Рабочий проект W3C. (Работа в процессе.)
Прочие ссылки
- [CSS1]
- Hkon Wium Lie; Берт Бос. Каскадные таблицы стилей, уровень 1. 1996. Рекомендация W3C. Отредактировано 11 января 1999 г. URL: http://www.w3.org/TR/REC-CSS1
- [CSS2]
- Берт Бос; Хкон Виум Ли; Крис Лилли; Ян Джейкобс. Каскадный стиль Таблицы, уровень 2. 1998. Рекомендация W3C. URL: http://www.w3.org/TR/REC-CSS2
- [CSS3-введение]
- Эрик А. Мейер; Берт Бос. Введение в CSS3. 23 мая 2001 г.Рабочий проект W3C. (Работа в процессе.) URL: http://www.w3.org/TR/css3-roadmap
Индекс собственности
| Недвижимость | Значения | Начальный | Применимо к | дюйм. | В процентах | Медиа |
|---|---|---|---|---|---|---|
| цвет границы цвет верхней границы, граница-правый-цвет, цвет нижней границы, цвет границы слева | <цвет> | значение свойства ‘цвет’ | все элементы | № | НЕТ | визуал |
| стиль границы граница-верх-стиль, стиль границы-правый, border-bottom-style, граница-левый стиль | <стиль границы> | нет | все элементы | № | НЕТ | визуал |
| граница-верх-правый-радиус граница-нижний-правый-радиус, граница-нижний-левый-радиус, граница-верх-левый-радиус, граница-радиус | <длина> <длина>? | 0 | все элементы | № | НЕТ | визуал |
| граница-верхнее изображение, граница-правое-изображение, цвет нижней границы, граница-левое-изображение | | нет | все элементы | № | НЕТ | визуал |
| граница изображения | [ | нет | все элементы | № | НЕТ | визуал |
| граница-верхнее-левое-изображение, граница-верхнее-правое-изображение, граница-нижний-правый-цвет, граница-нижнее-левое-изображение | | продолжить | все элементы | № | НЕТ | визуал |
| Граница-угол-изображение | [ | нет | все элементы | № | НЕТ | визуал |
| граница-верх-подходящая длина, граница-длина-подходящая длина, граница-нижняя-подходящая длина, граница-левая-подходящая длина ширина верхней границы границы, ширина границы по ширине, ширина нижней границы границы, граница слева подходит ширина | [клип | повторить | масштаб | растянуть | перезаписать | переполнение | пробел] {1,2} | повтор | все элементы | № | НЕТ | визуал |
| длина по краю ширина рамки | | повтор | все элементы | № | НЕТ | визуал |
| граница | | повтор | все элементы | № | НЕТ | визуал |
| граница-верх-левый-подходят-длина, граница-верх-права-подходят-длина, граница-нижняя-правая-длина, граница-нижний-левый-подходят-длина ширина границы верхнего левого угла, ширина границы-верхнего-правого-подходящего, граница-нижняя-правая-ширина, граница-нижний-левый-подходит-ширина | [клип | повторить | масштаб | растянуть | перезаписать | переполнение | пробел] {1,2} | перезаписать | все элементы | № | НЕТ | визуал |
| границы-уголки | | перезаписать | все элементы | № | НЕТ | визуал |
| бордюр-изображение-преобразование | нет | повернуть | отражать-ху | отражать право | отражение слева | нет | все элементы | № | НЕТ | визуал |
| граница | <стиль границы> | нет | элементов с бордюром | да | НЕТ | визуал |
| тень коробки | нет | [ <длина> <длина> <длина> ? || <цвет> ] [, <длина> <длина> <длина> ? || <цвет> ] + | нет | все элементы | № | НЕТ | визуал |
| граница сверху, граница справа, граница снизу, граница слева | [<ширина-границы> || <стиль границы> || [<цвет> | прозрачный] || | Посмотреть отдельные объекты | все элементы | № | НЕТ | визуал |
| граница | [<ширина-границы> || <стиль границы> || [<цвет> | прозрачный] || [ | Посмотреть отдельные объекты | все элементы | № | НЕТ | визуал |
Следующие свойства определены в других модулях:
- ‘border-width’ : Модуль Box
- «режим письма» : Текстовый модуль