Содержание
Всем привет. На связи coderistu.ru. В этой статье мы рассмотрим, как сделать различные html - рамки на сайте с помощью сss.
Стили рамок
Допустим, у нас есть текстовый блок, который нуждается в простой, но красивой css рамке. Сделать ее нам поможет свойство border:
Пример:
Привет, я текст.)
CSS стили:
text-align:center;
padding:15px;
border:2px solid #F44336;
}
Здесь 2px - толщина рамки, solid - стиль, #F44336 -цвет
Отлично, рамка готова. Теперь можно навести немного красоты и поменять ее стиль:
1. Пунктирная рамка:
Привет. Я - текст)
2. Рамка из точек:
Привет. Я - текст)
3. Двойная:
Привет. Я - текст)
4. Двухцветная двухконтурная:
Привет. Я - текст)
5. Двухцветная двухконтурная - зеркальный вариант предыдущей:
Привет. Я - текст)
6. Просто двухцветная:
Привет. Я - текст)
7. Двухцветная - зеркальный вариант предыдущей:
Привет. Я - текст)
Разноцветная рамка с разными границами
Чтобы сделать многоцветную рамку с границами разного цвета, стиля и толщины, необходимо использовать свойства border-style, border-width и border-color.
Пример:
text-align:center;
padding:15px;
border-style:solid dotted dashed double;
border-width: 2px 3px 4px 5px;
border-color: #2196F3 #E91E63 #e2e218 #8BC34A;}
Привет. Я - текст)
Рамка с одной или нескольких сторон
Чтобы сделать рамку с одной или нескольких сторон блока, можно пойти 3 путями:
- Задать нулевую толщину стенки через border-width. Например, border-width: 2px 0px 0px 0px.
- Сделать стенку прозрачной через border-color. Например, border-color: transparent #E91E63 #e2e218 #8BC34A.
- Задать стиль через следующие свойства: border - left (левая), border - right (правая), border - top (верхняя), border - bottom (нижняя).
Пример:
text-align:center;
padding:15px;
border-left: 5px double #8BC34A;}
Привет. Я - текст)
Внутренняя рамка
Рамку внутри блока можно сделать при помощи css - свойства outline.
Пример:
text-align:center;
padding: 20px;
outline: 1px dashed #fff;
background: #000;
outline-offset: -10px;
color: #fff
}
Привет. Я - текст)
На это все. Мы научились делать рамки разных стилей с помощью css. Надеюсь, что статья была вам полезной!