Рамка | CSS

• border
  1. border-style
  2. border-color
  3. border-width
  4. Border Shorthand Properties
• border-radius
• border-image
• outline
• Поля и отступы 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;

none solid dotted dashed double groove ridge inset outset
none solid dotted dashed double groove ridge inset outset
none solid dotted dashed double groove ridge inset outset
none solid dotted dashed double groove ridge inset outset

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>