CSS - Контуры

Очертания очень похожи на границы, но есть несколько существенных отличий -

Контур не занимает места.
Очертания не обязательно должны быть прямоугольными.
Очертание всегда одинаково со всех сторон; вы не можете указать разные значения для разных сторон элемента.

NOTE - Свойства структуры не поддерживаются IE 6 или Netscape 7.

Вы можете установить следующие свойства структуры с помощью CSS.

В outline-width Свойство используется для установки ширины контура.
В outline-style Свойство используется для установки стиля линии для контура.
В outline-color Свойство используется для установки цвета контура.
В outline Свойство используется для установки всех трех указанных выше свойств в одном операторе.

Свойство outline-width

Свойство outline-width определяет ширину контура, добавляемого к блоку. Его значение должно быть длиной или одним из значений тонкого, среднего или толстого, как и атрибут border-width.

Ширина в ноль пикселей означает отсутствие контура.

Вот пример -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:solid;">
         This text is having thick outline.
      </p>
      <br />
      
      <p style = "outline-width:5px; outline-style:solid;">
         This text is having 5x outline.
      </p>
   </body>
</html>

Это даст следующий результат -

Свойство в стиле контура

Свойство outline-style определяет стиль линии (сплошной, пунктирной или пунктирной), огибающей элемент. Может принимать одно из следующих значений -

none- Без границы. (Эквивалент ширины контура: 0;)
solid - Контур - одна сплошная линия.
dotted - Контур представляет собой серию точек.
dashed - Контур - это серия коротких линий.
double - Контур - две сплошные линии.
groove - Контур выглядит так, как будто он вырезан на странице.
ridge - Контур противоположен пазу.
inset - Контур заставляет окно выглядеть так, как будто оно встроено в страницу.
outset - Контур заставляет коробку выглядеть так, как будто она выходит из холста.
hidden - То же самое.

Вот пример -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin solid  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;">
         This text is having thick dashed outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;">
         This text is having 5x dotted outline.
      </p>
   </body>
</html>

Это даст следующий результат -

Свойство цвета контура

Свойство outline-color позволяет вам указать цвет контура. Его значение должно быть либо именем цвета, либо шестнадцатеричным цветом, либо значением RGB, как в свойствах color и border-color.

Вот пример -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;outline-color:red">
         This text is having thin solid red  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

Это даст следующий результат -

Контурное свойство

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

Вот пример -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline:thin solid red;">
         This text is having thin solid red outline.
      </p>
      <br />
      
      <p style = "outline:thick dashed #009900;">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline:5px dotted rgb(13,33,232);">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

Это даст следующий результат -