Свойства CSS Пограничные
В CSS border свойства позволяют задать стиль, ширину и цвет границы элемента.
Этот элемент имеет границу канавку, которая 15px в ширину и зеленый.
Пограничный Стиль
border-style свойство определяет , какой вид границы , чтобы отобразить.
Следующие значения допускаются:
-
dotted- Определяет пунктирную рамку , -
dashed- Определяет пунктирную границу -
solid- Определяет твердую границу -
double- Определяет двойную границу -
groove- Определяет рифленую границу 3D. Эффект зависит от величины границы цвета -
ridge- Определяет ребристую границу 3D. Эффект зависит от величины границы цвета -
inset- Определяет границы 3D врезку. Эффект зависит от величины границы цвета -
outset- Определяет 3D боковик границу. Эффект зависит от величины границы цвета -
none- не определяет границы -
hidden- Определяет скрытую границу
border-style свойство может иметь от одного до четырех значений (для верхней границы, правой границы, нижней границы, а также левой границы).
пример
p.dotted {border-style: dotted;}
p.dashed
{border-style: dashed;}
p.solid {border-style: solid;}
p.double
{border-style: double;}
p.groove {border-style: groove;}
p.ridge
{border-style: ridge;}
p.inset {border-style: inset;}
p.outset
{border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}Результат:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
Попробуй сам "  | Примечание: Ни один из других CSS пограничных свойств , описанных ниже , не будет иметь никакого эффекта , если border-style свойство не установлено! |
|---|
Ширина рамки
border-width свойство определяет ширину четырех границ.
Ширина может быть установлен в качестве определенного размера (в px, pt, cm, em , и т.д.) , либо с помощью одного из трех предопределенных значений: тонкий, средний или толстый.
border-width свойство может иметь от одного до четырех значений (для верхней границы, правой границы, нижней границы, а также левой границы).
пример
p.one
{
border-style: solid;
border-width: 5px;
}
p.two
{
border-style: solid;
border-width: medium;
}
p.three
{
border-style: solid;
border-width: 2px 10px 4px 20px;
}
Попробуй сам " Цвет границы
border-color свойство используется , чтобы установить цвет четырех границ.
Цвет может быть установлен с помощью:
- name - указать имя цвета, как "red"
- Hex - задать шестнадцатеричное значение, например "#ff0000"
- RGB - укажите значение RGB, как "rgb(255,0,0)"
- transparent
border-color свойство может иметь от одного до четырех значений (для верхней границы, правой границы, нижней границы, а также левой границы).
Если border-color не установлен, он наследует цвет элемента.
пример
p.one
{
border-style: solid;
border-color: red;
}
p.two
{
border-style: solid;
border-color: green;
}
p.three {
border-style: solid;
border-color: red green blue yellow;
} Попробуй сам " Граница - Отдельные Стороны
Из приведенных выше примеров вами увидели, что можно указать другую границу для каждой из сторон.
В CSS, есть также свойства для задания каждой из границ (сверху, справа, снизу и слева направо):
пример
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
} Попробуй сам " Приведенный выше пример дает тот же результат, что и это:
Итак, вот как это работает:
Если border-style собственности имеет четыре значения:
- border-style : пунктирный твердых двойной штриховой;
- Верхняя граница пунктир
- правая граница является твердой
- нижняя граница вдвое
- левая граница пунктирная
Если border-style собственности имеет три значения:
- border-style : пунктирный твердых двойной;
- Верхняя граница пунктир
- правые и левые границы являются твердыми
- нижняя граница вдвое
Если border-style собственности имеет два значения:
- border-style : пунктирный твердого вещества;
- верхние и нижние границы усеяны
- правые и левые границы являются твердыми
Если border-style собственности имеет одно значение:
- border-style : пунктир;
- все четыре границы усеяны
border-style свойство используется в приведенном выше примере. Тем не менее, он также работает с border-width и border-color .
Граница - сокращённое свойство
Как вы можете видеть из приведенных выше примеров, есть много свойств, которые необходимо учитывать при работе с границами.
Для сокращения кода, также можно указать все отдельные пограничные свойства в одном собственности.
border свойство свойство является обобщающим для следующих отдельных пограничных свойств:
-
border-width -
border-style(обязательно) -
border-color
Еще примеры
Все лучшие свойства границы в одной декларации
Этот пример демонстрирует сокращённое свойство для установки всех свойств для верхней границы в одной декларации.
Устанавливает стиль нижней границы
Этот пример показывает, как установить стиль нижней границы.
Установите ширину левой границы
Этот пример показывает, как установить ширину левой границы.
Установите цвет четырех границ
Этот пример показывает, как установить цвет четырех границ. Он может иметь от одного до четырех цветов.
Установите цвет правой границы
Этот пример показывает, как установить цвет правой границы.
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4»
Все свойства CSS Пограничные
| Имущество | Описание |
|---|---|
| border | Устанавливает все свойства рамки в одной декларации |
| border-bottom | Устанавливает все свойства нижней границы в одной декларации |
| border-bottom-color | Устанавливает цвет нижней границы |
| border-bottom-style | Устанавливает стиль нижней границы |
| border-bottom-width | Устанавливает ширину нижней границы |
| border-color | Устанавливает цвет четырех границ |
| border-left | Устанавливает все левой границы свойства в одной декларации |
| border-left-color | Устанавливает цвет левой границы |
| border-left-style | Устанавливает стиль левой границы |
| border-left-width | Устанавливает ширину левой границы |
| border-right | Устанавливает все правильные пограничные свойства в одной декларации |
| border-right-color | Устанавливает цвет правой границы |
| border-right-style | Устанавливает стиль правой границы |
| border-right-width | Устанавливает ширину правой границы |
| border-style | Устанавливает стиль четырех границ |
| border-top | Устанавливает все свойства верхней границы в одной декларации |
| border-top-color | Устанавливает цвет верхней границы |
| border-top-style | Устанавливает стиль верхней границы |
| border-top-width | Устанавливает ширину верхней границы |
| border-width | Устанавливает ширину четырех границ |