Контуры очень похожи на границы, но есть и незначительные отличия,

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

ПРИМЕЧАНИЕ. Свойства контура не поддерживаются IE 6 или Netscape 7.

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

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

Свойство outline-width

Свойство outline-width указывает ширину контура, который нужно добавить в поле. Его значение должно быть длиной или одним из значений thin, medium,или thick, подобно атрибуту 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

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

  • none: нет границы. (Эквивалент ширины линии: 0;)
  • solid: контур - сплошная сплошная линия.
  • dotted: Контур - это серия точек.
  • dashed: контур - это серия коротких строк.
  • double: Outline - две сплошные линии.
  • groove: схема выглядит так, как будто она вырезана на странице.
  • ridge: контур выглядит противоположным.
  • inset: Outline делает окно похожим на встроенный в страницу.
  • outset: Outline заставляет окно выглядеть так, как будто он выходит из холста.
  • 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

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

Вот пример -

< 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>

Это приведет к следующему результату -


Свойства outline

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

Вот пример -

< 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>

Это приведет к следующему результату -





Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok