Страницы обрамления CSS

CSS рамки - отдельные края

Из примеров上一 главы вы уже видели, что можно указать разные рамки для каждого края.

В CSS есть некоторые свойства, которые можно использовать для указания каждого края рамки (верхний, правый, нижний и левый):

Пример

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Результат:

Разные стили рамок

попробуйте сами

Разные стили рамок

Результат примера выше аналогичен:

Пример

p {
  border-style: точечная сплошная;
}

попробуйте сами

Принцип работы следующий:

Если border-style Настройка свойств چهارех значений:

border-style: точечная сплошная двойная прерывистая;

  • Верхняя рамка является пунктирной линией
  • Правая рамка является сплошной линией
  • Нижняя рамка является двойной линией
  • Левая рамка является пунктирной линией

Если border-style Настройка свойств трёх значений:

border-style: точечная сплошная двойная;

  • Верхняя рамка является пунктирной линией
  • правый и левый края являются сплошными
  • Нижняя рамка является двойной линией

Если border-style Свойство установлено двумя значениями:

border-style: точечная сплошная;

  • верхние и нижние края являются пунктирными
  • правый и левый края являются сплошными

Если border-style Свойство установлено одним значением:

border-style: точечная;

  • Все четыре стороны имеют пунктирную линию

Пример

/* Четыре стоимости */
p {
  border-style: точечная сплошная двойная прерывистая; 
}
/* Три стоимости */
p {
  border-style: точечная сплошная двойная; 
}
/* Две стоимости */
p {
  border-style: точечная сплошная; 
}
/* Одна стоимость */
p {
  border-style: точечная; 
}

попробуйте сами

в примере используется border-style свойство. Но border-width и border-color Это также применяется.