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

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

ПРИМЕЧАНИЕ. Свойства контура не поддерживаются 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>

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



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




Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok