В последнее время я пытался переосмыслить правила CSS, которые я принял в своей практике. Я написал огромное количество кода без реального понимания того, почему он работает именно так.
Я просто решал задачи определенным способом, основываясь на общепринятой практике. Но с недавних пор я задумался, могу ли я узнать хотя бы приблизительно причину, почему все работает так, а не иначе?
CSS круги на Rdio, Dribbble, и Codecademy
Такой трюк часто достигается использованием CSS свойства border-radius. Я решал эту задачу следующим образом - создавал квадрат и устанавливал border-radius в 50%. Я никогда не задавался вопросом, почему нужно делать именно так, я просто согласился с тем, что если установить радиус как половину высоты/ширины квадрата на всех углах, то я получу круг.
Рассмотрим пример. Пусть у нас есть квадрат размерами 150px на 150px, превратим его в круг, установив радиус для каждого угла в 50%. Согласно стандарту W3C в разделе о border-radius , процентные единицы для border-radius относятся к ширине и к высоте элемента. В моем примере, ширина/высота элемента составляет 150px, таким образом 50% вернет нам значение в 75px.
Преобразование квадрата в круг на CSS свойства border-radius (см. на CodePen)
Браузер также будет масштабировать все остальные углы, пока каждый угол не будет иметь радиус 50%, и мы не получим наш круг. Даже если вы укажете радиус в 150px для каждого угла, в действительности вы получите радиус в 75px, так как это максимальное значение которое позволяет установить браузер для каждого угла.
По крайней мере, это кажется довольно бессмысленным, если вы заранее знаете, что браузер в любом случае будет масштабировать радиусы до 50%. Использование 50% кажется верным решением.
А для меня время исправить расставленные мною случайные CSS свойства за последнею неделю…
Теги: css, border-radius
The border-radius property does not apply to table elements when have shared or separate borders."> border-collapse is collapse .
Note: As with any shorthand property, individual sub-properties cannot inherit, such as in border-radius:0 0 inherit inherit , which would partially override existing definitions. Instead, the individual longhand properties have to be used.
The border-radius property is specified as:
radius | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
|
top-left-and-bottom-right | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
|
top-right-and-bottom-left | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
|
top-left | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
|
top-right | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
|
bottom-right | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
|
bottom-left | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
Border-radius: 1em/5em; /* ... is equivalent to: */ border-top-left-radius: 1em 5em; border-top-right-radius: 1em 5em; border-bottom-right-radius: 1em 5em; border-bottom-left-radius: 1em 5em; border-radius: 4px 3px 6px / 2px 4px; /* ... is equivalent to: */ border-top-left-radius: 4px 2px; border-top-right-radius: 3px 4px; border-bottom-right-radius: 6px 2px; border-bottom-left-radius: 3px 4px;
where The compatibility table in this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. Update compatibility data on GitHub Notes
Notes
Prefixed
Notes
Notes
Prefixed
Notes
Notes
Notes
Notes
Prefixed
Prefixed
Prefixed
Notes
Notes
Notes
Notes
Notes
Notes
Notes
Notes
CSS3-рамка
дополняет возможности форматирования границ элементов с помощью свойств, позволяющих закруглить углы
элемента, а также использовать изображения
для оформления границ элемента. IE:
9.0 Свойство позволяет закруглить углы строчных и блочных элементов. Кривая для каждого угла определяется с помощью одного или двух радиусов, определяющих его форму — круга
или эллипса
. Радиус распространяется на весь фон, даже если элемент не имеет границ, точное положение секущей определяется с помощью свойства background-clip . Свойство border-radius позволяет закруглить все углы одновременно, а с помощью свойств border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius можно закруглить каждый угол отдельно. Если задать два значения для свойства border-radius , то первое значение закруглит верхний левый
и нижний правый угол
, а второе — верхний правый
и нижний левый
. Значения, заданные через / , определяют горизонтальные
и вертикальные радиусы
. Свойство не наследуется. Варианты
Div {width: 100px; height: 100px; border: 5px solid;}
.r1 {border-radius: 0 0 20px 20px;}
.r2 {border-radius: 0 10px 20px;}
.r3 {border-radius: 10px 20px;}
.r4 {border-radius: 10px/20px;}
.r5 {border-radius: 5px 10px 15px 30px/30px 15px 10px 5px;}
.r6 {border-radius: 10px 20px 30px 40px/30px;}
.r7 {border-radius: 50%;}
.r8 {border-top: none; border-bottom: none; border-radius: 30px/90px;}
.r9 {border-bottom-left-radius: 100px;}
.r10 {border-radius: 0 100%;}
.r11 {border-radius: 0 50% 50% 50%;}
.r12 {border-top-left-radius: 100% 20px; border-bottom-right-radius: 100% 20px;}
IE:
11.0 Свойство позволяет устанавливать изображение в качестве рамки элемента. Основное требование, предъявляемое к изображению — оно должно быть симметричным. Свойство включает в себя следующие значения: {border-image: width source slice repeat outset;} . При помощи такого простого изображения можно получить вот такие рамки для элемента.
/* Пример 1 */
div {
width: 260px; height: 100px;
border-style: solid;
border-image-width: 15px;
border-image-source: url(border_round.png);
border-image-slice: 30;
border-image-repeat: stretch;
}
/* Пример 2 */
div {
width: 260px; height: 100px;
border-style: solid;
border-image-width: 15px;
border-image-source: url(border_round.png);
border-image-slice: 30;
border-image-repeat: round;
}
Cрезы A — B — C — D образуют углы рамки, а часть рисунка, расположенная между ними, заполняет оставшееся пространство рамки в соответствии с заданным значением свойства border-image-repeat . Размер угловой части (в данном примере это число 30), задается с помощью значения свойства border-image-slice . Свойство задаёт ширину изображения для границы элемента. Если ширина не задана, то по умолчанию она равна 1 . Синтаксис
Div {border-image-width: 30px;}
Рис. 3. Пример задания ширины рамки-изображения с помощью различных типов значений
Свойство задаёт путь к изображению, которое будет использоваться для оформления границ блока. Синтаксис
Div {border-image-source: url(border.png);}
Свойство определяет размер частей изображения, используемых для оформления границ элемента и делит изображение на девять частей: четыре угла, четыре края между углами и центральную часть. Синтаксис
Div {border-image-slice: 50 20;}
Свойство управляет заполнением фоновым изображением пространства между углами рамки. Можно задавать как с помощью одного значения, так и с помощью пары значений. Синтаксис
Div {border-image-repeat: repeat;}
Рис. 5. Пример повтора центральной части рамки-изображения с помощью различных типов значений
Свойство позволяет переместить изображение-рамку за пределы границ элемента на указанную длину. Может задаваться как с помощью одного, так и четырёх значений. Синтаксис
Div {border-image-outset: 10px;}
Свойство задаёт расстояние между границей элемента border и внешней границей, созданной с помощью свойства outline . Значением border-image может выступать не только изображение, но и градиентная заливка. В качестве одного из цветов выступает transparent . Таким способом можно задавать границы сразу для всех сторон элемента или по отдельности для каждой стороны. Толщина рамки регулируется свойством border-width .
Examples
border: solid 10px;
/* the border will curve into a "D" */
border-radius: 10px 40px 40px 10px;
border: groove 1em red;
border-radius: 2em;
background: gold;
border: ridge gold;
border-radius: 13em/3em;
border: none;
border-radius: 40px 10px;
border: none;
border-radius: 50%;
border: dotted;
border-width: 10px 4px;
border-radius: 10px 40px;
border: dashed;
border-width: 2px 4px;
border-radius: 40px;
Live Samples
Specifications
Specification
Status
Comment
CSS Backgrounds and Borders Module Level 3
The definition of "border-radius" in that specification.
Candidate Recommendation
Initial definition
Initial value
Applies to
all elements; but User Agents are not required to apply to table and inline-table elements when have shared or separate borders."> border-collapse is collapse . The behavior on internal table elements is undefined for the moment.. It also applies to ::first-letter .
Inherited
no
Percentages
refer to the corresponding dimension of the border box
Media
visual
Computed value
as each of the properties of the shorthand:
Animation type
as each of the properties of the shorthand:
Canonical order
the unique non-ambiguous order defined by the formal grammar
Browser compatibility
Desktop
Mobile
Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
Android webview
Chrome for Android
Edge Mobile
Firefox for Android
Opera for Android
Safari on iOS
Samsung Internet
Basic support
Chrome
Full support
4 Edge
Full support
12 Full support
12
Full support
12 Firefox
Full support
4 IE
Full support
9
Opera
Full support
10.5 Safari
Full support
5 WebView Android
Full support
2 Edge Mobile
Full support
Yes Full support
Yes
Full support
Yes Firefox Android
Full support
Yes Opera Android
Full support
Safari iOS
Full support
Yes
Elliptical borders
Chrome
Full support
Yes Edge
Full support
12
Firefox
Full support
3.5
IE
Full support
Yes
Opera
Full support
Yes
Safari
Full support
Yes WebView Android
?
Chrome Android
Full support
Yes
Safari iOS
?
Samsung Internet Android
Full support
Yes
4 values for 4 corners
Chrome
Full support
4
Edge
Full support
12
Firefox
Full support
Yes
IE
Full support
Yes
Opera
Full support
Yes
Safari
Full support
5
WebView Android
?
Chrome Android
Full support
Yes
Edge Mobile
Full support
Yes
Firefox Android
Full support
Yes
Opera Android
No support
No
Safari iOS
?
Samsung Internet Android
Full support
Yes
Percentages
Chrome
Full support
Yes Edge
Full support
12
Firefox
Legend
Full support
Full support
No support
No support
Compatibility unknown
Compatibility unknown See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
See also
Закруглённые углы и рамки-изображения
1. Закругление углов с помощью border-radius
Поддержка браузерами
Firefox:
4.0
Chrome:
4.0
Safari:
5.0, 3.1 -webkit-
Opera:
10.5
iOS Safari:
7.1
Opera Mini:
—
Android Browser:
4.1
Chrome for Android:
44
Рис. 1. Примеры различных вариантов закругления углов блока
2. Рамки-изображения border-image
Поддержка браузерами
Firefox:
15.0, 3.5 -moz-
Chrome:
16.0, 7.0 -webkit-
Safari:
6.0, 3.0 -webkit-
Opera:
15.0, 11.0 -o-
iOS Safari:
7.1
Opera Mini:
8 -o-
Android Browser:
4.4, 4.1 -webkit-
Chrome for Android:
42
Рис. 2. Пример оформления границ блока с помощью изображения
2.1. Ширина рамки-изображения border-image-width
border-image-width
Значения:
длина
Устанавливает ширину рамки в единицах длины — px / em . Можно задавать от одной до четырех значений одновременно. Если задано одно значение, то ширина всех сторон рамки одинакова, два значения задают ширину верхней-нижней и правой-левой и т.д.
число
Числовое значение, на которое умножается значение border-width .
%
Ширина рамки элемента вычисляется относительно размера изображения. Горизонтальные относительно ширины, вертикальные - относительно высоты.
auto
Соответствует значению border-image-slice .
initial
inherit
2.2. Ресурс рамки-изображения border-image-source
2.3. Элементы рамки-изображения border-image-slice
Значения:
число
Размер частей рамки можно задавать с помощь одного, двух, трех или четырех значений.
Одно значение устанавливает границы одинакового размера для каждой стороны элемента.
Два значения: первое определяет размер верхней и нижней границы, второе - правой и левой.
Три значения: первое определяет размер верхней границы, второе - правой и левой, а третье - нижней границы.
Четыре значения: определяет размеры верхней, правой, нижней и левой границы.
Числовое значение представляет количество px .
%
Размеры границ рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные - относительно высоты.
fill
Значение указывается вместе с числом или процентным значением. Если оно задано, изображение не обрезается внутренним краем рамки, а заполняет также область внутри рамки.
initial
Устанавливает это свойство в значение по умолчанию.
inherit
Наследует значение этого свойства от родительского элемента.
Рис. 4. Пример задания срезов рамки-изображения
2.4. Повтор рамки-изображения border-image-repeat
2.5. Смещение рамки-изображения border-image-outset
Рис. 6. Пример смещения рамки-изображения с помощью различных типов значений
3. Смещение внешней рамки outline-offset
Рис. 7. Пример оформления изображения внешней рамкой
4. Градиентная рамка
Полупрозрачная рамка
Я уверен, вы уже знакомы с css свойством border. Узнаете ли вы что-то новое, чего не знали раньше о css border? Что же, не только узнаете, но и увидите несколько новых вещей, которых вы никогда не знали прежде!
Не только CSS3 можно использовать для закругления уголков, но и чистый CSS код подойдет для создания сложных форм. Раньше вы могли использовать background-image, для создания впечатления закругленных уголков. Благодаря новым техникам использования border, мы можем сделать это на чистом css коде.
Наверняка, вы уже ознакомлены со стандартным использованием border свойства:
Border: 1px solid black;
Код выше, выведет рамку в 1px, которая будет черного цвета. Легко и просто. Также можно немного расширить синтаксис:
Border-width: thick; border-style: solid; border-color: black;
Как дополнение, можно использовать специфические значения свойства border-width, три ключевых слова: thin, medium, thick.
Но использование расширенного синтаксиса не всегда практично. Давайте рассмотрим пример, когда нужно изменить цвет рамки блока, при наведении мыши. В таком случае использование сокращенного синтаксиса гораздо проще:
Box { border: 1px solid red; } .box:hover { border: 1px solid green; }
Более элегантно и проще можно сделать следующим образом:
Box { border: 1px solid red; } .box:hover { border-color: green; }
Как видите, расширенная техника также полезна, когда мы меняем только некоторые свойства: width, style, color и другие.
Border- radius - это «золотое» свойство CSS3 - первое, наиболее распространенное свойство, которое стало практичным и полезным. Исключая IE8 и версии ниже, все браузеры отображают закругленные уголки с помощью этого.
Хотя, необходимо использовать специальные префиксы для Webkit и Mozilla, чтобы стилизация была корректной.
Webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
В сегодняшнее время, мы можем убрать специальные префиксы, и использовать стандартную форму border-radius.
Еще одна привилегия в том, что мы можем использовать специальные значения для каждой из сторон блока:
Border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 30px; border-bottom-left-radius: 0;
В коде выше, устанавливая border-top-right-radius и border-bottom-left-radius на «нуль», можно добиться удивительных форм. Хотя элемент может наследовать некоторые свойства, которые нужно будет обнулить.
Наподобие как margin и padding, мы можем сжать синтаксис:
/* top left, top right, bottom right, bottom left */ border-radius: 20px 0 30px 0;
Как пример, применения свойства border-radius, покажу вам «лимон», который часто используют дизайнеры при верстке сайтов:
Lemon { width: 200px; height: 200px; background: #F5F240; border: 1px solid #F0D900; border-radius: 10px 150px 30px 150px; }
Во многих дизайнеров все познания, в области css свойства border, на этом заканчиваются. Но существует еще несколько крутых штук, с помощью которых можно создать потрясающие вещи!
Существует множество техник для создания дизайна с применением сложных структур border. Для примера, разберем следующие…
Мы всегда используем наиболее известные свойства solid, dashed и dotted. Но существует парочка иных свойств border-style: groove и ridge.
Border: 20px groove #e3e3e3;
Или в расширенном синтаксисе:
Border-color: #e3e3e3; border-width: 20px; border-style: groove;
Хотя эти свойства и полезны, но они не являются основой создания сложных рамок.
Наиболее популярная техника создания двойной рамки - использование свойства outline.
Box { border: 5px solid #292929; outline: 5px solid #e3e3e3; }
Этот способ работает отлично, хотя, он нас ограничивает только двумя рамками. Иногда бывает нужно создать градиентный border, который состоит из многих слоев… как тогда?
Когда техники outline не достаточно, альтернативным средством является использование псевдо элементов:before и:after. С помощью которых можно добавить дополнительные рамки к элементу:
Box { width: 200px; height: 200px; background: #e3e3e3; position: relative; border: 10px solid green; } /* Create two boxes with the same width of the container */ .box:after, .box:before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .box:after { border: 5px solid red; outline: 5px solid yellow; } .box:before { border: 10px solid blue; }
На вид не очень элегантно, но по крайней мере, это работает. Немного проблемно разобраться с последовательность цветов в рамках… но понять можно.
Интересным «детским способом» создания подобного эффекта, является использование CSS3 свойства box-shadow:
Box { border: 5px solid red; box-shadow: 0 0 0 5px green, 0 0 0 10px yellow, 0 0 0 15px orange; }
В этом случае мы были умнее, использовали специально предназначенное свойство box-shadow. Изменяя параметры x, y, blur на «нуль», мы можем использовать разные цвета для создания множества рамок.
Но есть проблемка, в старых браузерах, которые не понимают свойства box-shadow, будет видна только одна красная рамка в 5px.
«Помните! Дизайн сайта должен выглядеть кроссбраузерно, то есть одинаково во всех браузерах. Включая старые версии.»
В дополнение к используемому простому значению border-radius, мы можем указать два отдельных - разделяя их через / мы укажем горизонтальный и вертикальный радиус.
Для примера:
Border-radius: 50px / 100px; /* horizontal radius, vertical radius */
… это равносильно:
Border-top-left-radius: 50px 100px; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 100px; border-bottom-left-radius: 50px 100px;
Эта техника подходит, для создания уникальных форм блоков. Для примера, вот создание эффекта завернутой бумаги:
Box { width: 200px; height: 200px; background: #666; border-top-left-radius: 15em 1em; border-bottom-right-radius: 15em 1em; }
Эта техника показывает, как можно создавать css формы, при этом использовать элементы с нулевыми размерами высоты и ширины. Удивлены? Давайте посмотрим на примере…
Для следующих нескольких примеров, мы будем использовать следующую разметку:
…и следующий базовый стиль:
Box { width: 200px; height: 200px; background: black; }
Наиболее частый пример использования CSS форм - создание обтекающей стрелки. Секрет этой стрелки кроется в создании border с разными цветами для каждой из сторон. Потом, ставим атрибуты width и height на 0.
Назначим к div блоку класс arrow:
Arrow { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid green; border-bottom: 100px solid blue; border-left: 100px solid yellow; }
Что бы продемонстрировать, сначала мы используем расширенный синтаксис. Далее мы можем убрать лишний код, используя сокращенный синтаксис:
Arrow { width: 0; height: 0; border: 100px solid; border-color: red green blue yellow; }
Интересно, правда? Теперь мы установим прозрачные цвета на все стороны, кроме голубой стороны.
Arrow { width: 0; height: 0; border: 100px solid; border-bottom-color: blue; }
Отлично получилось! Но это противоречит семантической верстке , создавать.arrow div, только для того, чтобы добавить стрелочку на страницу. Для этой цели, мы можем использовать псевдоэлементы, что мы сейчас и сделаем.
Для создания Speech Bubble («Речевой хмарки»), нам понадобиться небольшой кусочек чистого CSS кода и один div блок.
Speech-bubble { position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; }
Speech-bubble:after { content: ""; }
На этом этапе, мы создадим стрелочку, которую делали прежде, добавим к элементу и остается только позиционировать:
Speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-color: red green blue yellow; }
Если мы хотим, чтобы стрелочка была направлена вниз, нам придется установить все border прозрачными, кроме верхнего.
Speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-top-color: red; }
Когда мы создаем эту CSS форму, мы не можем конкретно указать размер стрелочки. Вместо этого мы можем установить свойство border-width, которое будет назначать размер для стрелочки. Также мы установим позицию стрелочки внизу посредине. Соответственно для этого используем значения top и left.
Speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: red; top: 100%; left: 50%; }
Кроме этого, нам остается придать цвет, такой же как у блока. Помните, при позиционировании, нужно учитывать размер других border, которые невидимы (15px). Также придадим блоку закругления по углам.
Speech-bubble { /* … other styles */ border-radius: 10px; } .speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; /* adjust for border width */ }
Не плохо, а? Используя несколько css классов и хитрости border, можно создать такую штуку.
/* Speech Bubbles Usage: примените класс.speech-bubble и.speech-bubble-НАПРАВЛЕНИЕ, как показано ниже
Для одной строки текста, можно использовать line-height. Но если у вас две или больше строк текста… Наилучшим решением будет установить display свойство на table, и поместить весь текст в параграф. Вот как это выглядит на html разметке:
Speech-bubble { /* other styles */ display: table; } .speech-bubble p { display: table-cell; vertical-align: middle; }
Мы не ограничиваемся треугольниками. CSS способен отобразить разные формы - даже сердечки и знак биологической опасности.
Biohazard { width: 0; height: 0; border: 60px solid; border-radius: 50%; border-top-color: black; border-bottom-color: black; border-left-color: yellow; border-right-color: yellow; }
Для управления границей элемента применяется универсальное свойство border . Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента.
Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:
Можно указать стиль границы только на одной стороны элемента. Для этого применяют свойства border-top (верхняя граница), border-right (правая граница), border-bottom (нижняя граница), border-left (левая граница).
В этом примере для каждой стороны блока задана своя толщина границы, стиль и цвет.
Подумайте, как при помощи CSS можно создать такую фигуру:
Значения границы - толщину, стиль и цвет - можно задать отдельно используя специальные свойства.
Рассмотрим каждое из значений по отдельности.
Свойство border-style устанавливает стиль рамки. В CSS, в отличии HTML, граница элемента может быть не только сплошной. Допустимы следующие значения для стиля границы:
Примеры того, как они выглядят.
граница отсутствует (none)
сплошная граница (solid)
двойная граница (double)
граница из ряда точек (dotted)
пунктирная граница (dashed)
граница "бороздка" (groove)
граница "гребень" (ridge)
вдавленная граница (inset)
выдавленная граница (outset)
Кстати, если для рамки ridge задать цвет границы чёрный, то получится вот такой результат.
Блок div с рамкой чёрного цвета и стиля ridge.
Рамка выглядит как solid , но это потому что стиль ridge создаётся добавлением чёрного эффекта тени, а чёрный эффект на чёрной рамке не виден.
При помощи свойства border-style стиль границы может быть задан не только для всех сторон блока. Есть возможность задавать несколько значений одному свойству border-style , в зависимости от числа значений стиль границы будет присвоен разному числу сторон блока. Можно задать одно, два, три и четыре значения. Давайте рассмотрим примеры для каждого случая.
Одно значение (solid) - стиль границы установлен для всех сторон блока.
Два значения (solid double) - первое значение установило стиль для верхней и нижней сторон, второе для боковой.
Три значения (solid double dotted) - первое значение для верхней стороны, второе для боковых, стретье для нижней.
Четыре значения (solid double dotted dashed) - каждое значение для одной стороны по часовой стрелке начиная с верхней.
Для установки толщины границы элемента используется свойство border-width . Толщину границы можно задать в любых абсолютных единицах измерения, например в пикселах.
Как и для свойства border-style , для свойства также можно задавать от одного до четырёх значений. Рассмотрим примеры для каждого случая.
Код примера:
Также для свойства border-width существуют значения в виде ключевых слов. Всего их три:
Толщина границы: thin.
Толщина границы: medium.
Толщина границы: thick.
Для управления цветом границы используется средство border-color . Цвета для этого свойства можно задать используя любой способ, описанный в статье "Цвета в CSS ", а именно:
Свойство border-color также может иметь от одного до четырёх значений и обрабатывает их аналогично предыдущим свойствам.
Одно значение (red).
Два значения (red black).
Три значения (red black yellow).
Четыре значения (red black yellow blue).
Теперь вернёмся к задаче, озвученной выше, и нарисуем фигуру:
Вот код, который рисует такую фигуру, только побольше размером:
Выше упоминалось, что можно указать значения свойств границы только для одной стороны блока. Для этих целей есть свойства:
Напомню, для всех свойств указывается три значения (толщина, стиль и цвет) в любом порядке. Но существуют свойства, которые позволяют устанавливать толщину, цвет и стиль для каждой стороны отдельно. Написание этих свойст производно от вышеуказанных.
Параметры верхней границы (border-top ).
Параметры правой границы (border-right ).
Параметры нижней границы (border-bottom ).
Параметры левой границы (border-left ).
Пример использования этих свойств:
Свойство border-radius предназначено для округления углов границ элемента. Это свойство появилось в CSS3 и корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).
Значениями могут быть любые числа, используемые в CSS.
Свойство border-radius: 15px.
Если рамка блока не задана, то скругление происходит с фоном. Вот пример закругления блока без рамки, но с фоновым цветом:
Свойство border-radius: 15px.
Существуют свойства для скругленя каждого отдельно угла элемента. В этом примере использованы они все:
Border-top-left-radius: 15px; border-top-right-radius: 0; border-bottom-right-radius: 15px; border-bottom-left-radius: 0;
Свойство border-radius: 15px.
Хотя этот код можно записать одним объявлением: border-radius : 15px 0 15px 0 . Дело в том, что для свойства border-radius можно задавать от одного до четырёх значений. В таблице ниже приведены правила, которые определяют такие объявления.
Внимательно изучив эту таблицу можно понять, что самая короткая запись нужного стиля будет такой: border-radius : 15px 0 . Всего два значения.
Рисуем лимон средствами CSS.
Вот код такого блока:
Margin: 0 auto; /* Размещаем блок по центру */ width: 200px; height: 200px; background: #F5F240; border: 1px solid #F0D900; border-radius: 10px 150px 30px 150px;
Мы уже рисовали фигуру:
Теперь оставим от неё треугольник:
Код треугольника такой:
Margin: 0 auto; /* Размещаем блок по центру */ padding: 0px; width: 0px; height: 0; border: 30px solid white; border-bottom-color: red;