Как сделать css рамку

8183

Всем привет. На связи coderistu.ru. В этой статье мы рассмотрим, как сделать различные html - рамки на сайте с помощью сss.

Стили рамок

Допустим, у нас есть текстовый блок, который нуждается в простой, но красивой css рамке. Сделать ее нам поможет свойство border:

Пример:

Привет, я текст.)

CSS стили:

p {
text-align:center;
padding:15px;
border:2px solid #F44336;
}
Здесь 2px - толщина рамки, solid - стиль,  #F44336 -цвет

Отлично, рамка готова. Теперь можно навести немного красоты и поменять ее стиль:

1. Пунктирная рамка:

border:2px dashed #F44336;

Привет. Я - текст)

    2. Рамка из точек:

border:2px dotted #F44336;

Привет. Я - текст)

    3. Двойная:

border:3px double #F44336;

Привет. Я - текст)

4. Двухцветная двухконтурная:

border:4px groove #F44336;

Привет. Я - текст)

5. Двухцветная двухконтурная - зеркальный вариант предыдущей:

border:4px ridge #F44336;

Привет. Я - текст)

6. Просто двухцветная:

border:4px inset #F44336;

Привет. Я - текст)

7. Двухцветная  - зеркальный вариант предыдущей:

border:4px outset #F44336;

Привет. Я - текст)

Разноцветная рамка с разными границами

Чтобы сделать многоцветную рамку с границами разного цвета, стиля и толщины, необходимо использовать свойства border-style, border-width и border-color.

Пример:

p {
text-align:center;
padding:15px;
border-style:solid dotted dashed double;
border-width: 2px 3px 4px 5px;
border-color: #2196F3 #E91E63 #e2e218 #8BC34A;}

Привет. Я - текст)

 

Рамка с одной или нескольких сторон

Чтобы сделать рамку с одной или нескольких сторон блока, можно пойти 3 путями:

  1. Задать нулевую толщину стенки через border-width. Например, border-width: 2px 0px 0px 0px.
  2. Сделать стенку прозрачной через border-color. Например, border-color: transparent #E91E63 #e2e218 #8BC34A.
  3.  Задать стиль через следующие свойства: border - left (левая), border - right (правая), border - top (верхняя), border - bottom (нижняя).

Пример:

p {
text-align:center;
padding:15px;
border-left: 5px double #8BC34A;}

Привет. Я - текст)

Внутренняя рамка 

Рамку внутри блока можно сделать при помощи css - свойства outline. 

Пример:

p {
text-align:center;
padding: 20px;
outline: 1px dashed #fff;
background: #000;
outline-offset: -10px;
color: #fff
}

Привет. Я - текст)

На это все. Мы научились делать рамки разных стилей с помощью css. Надеюсь, что статья была вам полезной!

Добавить комментарий

Ваш адрес email не будет опубликован.

*
code