Рамка | CSS — Примеры

Рамка | CSS

CSS рамку можно реализовать с помощью двух свойств border и outline.

border CSS

border: border-width border-style border-color;

Свойство border-style

border: solid;
border: dotted;
border: dashed;

border: double;
border: groove;
border: ridge;

border: inset;
border: outset;
border: none;



div {
  border-style: none;
  height: 25em;
}

/* или */ 

div {
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  height: 25em;
}

Свойство border-color

По умолчанию border-color совпадает с color (цвет текста)

color: ;
border: solid #222222;

Чтобы сделать прозрачную рамку достаточно цвет написать в rgba: теория, конвертер.

div {
  border-style: none;
  border-color: #222222;
  height: 25em;
}

/* или */ 

div {
  border-style: none;
  border-top-color: #222222;
  border-right-color: #222222;
  border-bottom-color: #222222;
  border-left-color: #222222;
  height: 25em;
}

Свойство border-width

border-width может быть указан в любых единицах измерения, но не в процентах. А также

border: thin solid;
border: medium solid;
border: thick solid;
div {
  border-style: none;
  border-color: #222222;
  border-width: 3px;
  height: 25em;
}

/* или */ 

div {
  border-style: none;
  border-color: #222222;
  border-top-width: 3px;
  border-right-width: 3px;
  border-bottom-width: 3px;
  border-left-width: 3px;
  height: 25em;
}

Другое написание, где для каждой стороны есть своё свойство

div {
  border-top: 3px none #222222;
  border-right: 3px none #222222;
  border-bottom: 3px none #222222;
  border-left: 3px none #222222;
  height: 25em;
}

Как рассчитывается ширина элемента HTML. В чём разница между border и outline

    margin: 30px;     padding: 15px;     width: 100px;
    outline-width: 10px; или border-width: 10px;

содержимое
Ширина = 60 margin + 30 padding + 100 width.

содержимое
Ширина = 60 margin (40 + 20 outline) + 30 padding + 100 width.

содержимое
Ширина = 60 margin + 20 border + 30 padding + 100 width.

margin, padding, outline, border при расчётах ширины нужно удвоить, поскольку учитываются и левая, и правая стороны. Поочерёдно наведите курсор на две ссылки в предыдущем предложении. Другой пример почему происходит смещение в div

width: 500px;
width: 250px;
width: 250px;

width: 500px;
width: 250px;
width: 250px;
border: solid;

Внеся box-sizing: border-box; border не будет увеличивать ширину и высоту блока
width: 500px;
width: 250px;
width: 250px;
border: solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Также как и padding, его нужно учитывать в height и width
width: 500px;
width: 250px;
width: 250px;
border: solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;

Как сделать рамку из нескольких цветов HTML

содержимое
<style type="text/css">
.ramkacvet {
  width: 30%; 
  margin: 30px auto;
  background: white content-box; /* родительский фон за счёт padding */ 
  padding: 5px;
  border: solid 5px yellow;
  box-shadow: 0 0 0 5px pink; /* тень блока HTML */ 
  outline: 5px solid green; /* в IE подменяет box-shadow */ 
  position: relative;
}

.ramkacvet:after {
  border: solid 5px blue;
  position: absolute;
  content: "";
  top: -15px; 
  right: -15px; 
  bottom: -15px; 
  left: -15px; 
}

.ramkacvet:before { /* :before CSS */ 
  border: solid 5px red;
  position: absolute;
  content: "";
  top: -20px; 
  right: -20px; 
  bottom: -20px; 
  left: -20px; 
}
</style>

<div class="ramkacvet">содержимое</div>
http://shpargalkablog.ru/2013/01/skachet-menu.html

CSS прозрачная картинка

Сравните

Лиса нюхает цветокЛиса нюхает цветок

<img alt="Лиса нюхает цветок" src="http://2.bp.blogspot.com/-sy6DMWrlfv4/UlDiksWHMLI/AAAAAAAAEDQ/xodTOQapT8g/s00/x_19f2a02b.jpg"><img alt="Лиса нюхает цветок" src="http://2.bp.blogspot.com/-sy6DMWrlfv4/UlDiksWHMLI/AAAAAAAAEDQ/xodTOQapT8g/s00/x_19f2a02b.jpg">

<div id="itog5"></div>
в f t
наверх ↑

10 комментариев:

Анонимный
Ничего особенного здесь нет! Инфа устарела уже на лет 8..как минимум.
NMitra
А какую рамку вы хотите? Что вы ожидали увидеть? Что значит устарела? Вы не пользуетесь свойством border?

Предлагайте, а я подумаю как реализовать.
Tamara Pullo
Мне очень полезна статья - потому что я "чайничек", сама вымучиваю свой сайт))) Спасибо.
NMitra
Пожалуйста, сама порой возвращаюсь к ней.
Анонимный
Спасибо.
NMitra
А взгляните ещё на http://shpargalkablog.ru/2013/12/border.html
Эту статью хочу переписать. Какая вам больше нравится?
Жека :)
Блин! Я уже просто не могу сдержать восторга от Вас и Вашего сайта! ну так же все доступно описано, расписано, показано, разжевано и донесено до читателя... просто аплодисменты стоя!!! Браво! Я чайник чайником и казалось бы и не понять мне все эти нюансы CSS, но тут все так хорошо описаны все процессы, при том любой урок какой не возьми, что волей не волей уже начинаешь понимать!!! Спасибо Вам за такой труд! Сколько не бегал по сайтам в поисках таких наглядных примеров лучше Вас, как мне кажется, этого сделать не смогли! Респект и уважуха!!!
NMitra
Благодарю, Жека, ваши слова греют мне душу :)
Светлана Титова
Спасибо за статью. А не могли бы вы мне подсказать, как прикрепить тень к рамке (в виде PNG-картинки или стиля)?
NMitra
Посмотрите про box-shadow
пример http://jsfiddle.net/NMitra/4hackgor/
статья http://shpargalkablog.ru/2011/06/css-box-shadow.html