CSS. Рамки.

     Границы элементов в CSS задаются свойством border. Толщина рамки определяется свойством border-width, которое может принимать значения: thin (тонкий слой), medium (средний слой) ,thick (толстый слой) и числовые значения px.
     Цвет рамки задается свойством border-color .
     Также существуют всевозможные стили рамок, которые определяются свойством border-style: solid, dotted, dashed, double, groove, ridge, outset, inset.
     CSS-код такой рамки, например, будет выглядеть так:
h3 {
border-width: thick;
border-style: dotted;
border-color: gold;
}
или
h3 {
border: thick dotted gold ;
}
    Таким образом получилась рамка толщиной thick, стилем dotted и цветом gold. Применение всех стилей рамок вы можете посмотреть ниже на примере.

Пример:

<html>
  <head>
    <title>Пример</title>
    <style type="text/css">
       .ramka {border: thin solid red;}
       .ramka2 {border: 3px dotted #2F4F4F;}
       .ramka3 {border: 3px dashed& #696969;}
       .ramka4 {border: thick double green;}
       .ramka5 {border: 10px groove #6495ED;}
       .ramka6 {border: 10px ridge red;}
       .ramka7 {border: 10px outset  #696969;}
       .ramka8 {border: 10px inset #00FFFF;}
   </style>
  </head>
  <body>
   <h3  class="ramka">Стиль solid </h3>
   <h3  class="ramka2"> Стиль dotted</h3>
   <h3  class="ramka3"> Стиль dashed</h3>
   <h3  class="ramka4"> Стиль double</h3>
   <h3  class="ramka5"> Стиль groove</h3>
   <h3  class="ramka6"> Стиль  ridge</h3>
   <h3  class="ramka7"> Стиль  outset</h3>
   <h3  class="ramka7"> Стиль  inset</h3>
</body>
</html>
 

Результат: (открыть в браузере)


 

  Смотрите также:
Загрузка...

     Свойства для верхнего, нижнего, правого и левого края рамки.