Оформление границы CSS
Как задать границы в css. Для любого элемента на веб-страницы, вы можете установить границу.
Я уже писала о том, как менять border, используя встроенный css (что такое встроенный стиля читайте в статье основы css).
Однако часто нам нужно задавать границы и изменять его свойства не только при оформлении записи, но и применять границы в оформлении блога. В этом случае применяют правила css.
Пример применения стилей border для заголовка h1:
Свойства border:
- border-width – толщина границы,
- border-style – стиль. Возможные значения:
- dotted – точечная,
- dashed – пунктирная,
- solid – сплошная,
- double - двойная,
- groove – бороздка, трехмерная граница,
- ridge – “гребень”,
- inset - вдавленная,
- outset - выпуклая.
- border-color – цвет границы.
- border-image – граница в виде изображения. Не отображается в старых браузерах. Для обеспечения совместимости с другими браузерами нужно прописать отдельно для
- Mozilla firefox свойство -moz-border-image,
- для safari, chrome, Android и iOS -webkit-border-image,
- старые версии Оперы -o-border-image
/*
Возможно применить границу только с одной или нескольких определенных сторон или стилизовать стороны по-разному:
- border-top – верхняя граница,
- border-right – правая,
- border-bottom – нижняя,
- border-left – левая.
Еще один пример применения border стилей:
Сокращенная запись border:
Таким образом. сначала записывается ширина, затем стиль и только после них идет цвет границы.
Пример оформления цитаты с помощью границы:
blockquote { border: 2px solid #ff0; }
