Учебники

CSS — Контуры

Сентябрь 21, 2018

Контуры очень похожи на границы, но есть и несколько основных отличий.

  • Контур не занимает места.

  • Контуры не должны быть прямоугольными.

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

Контур не занимает места.

Контуры не должны быть прямоугольными.

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

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

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

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

  • Свойство outline-style используется для установки стиля линии для контура.

  • Свойство outline-color используется для установки цвета контура.

  • Свойство outline используется для установки всех трех вышеперечисленных свойств в одном операторе.

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

Свойство outline-style используется для установки стиля линии для контура.

Свойство outline-color используется для установки цвета контура.

Свойство outline используется для установки всех трех вышеперечисленных свойств в одном операторе.

Свойство outline-width

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

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

Вот пример —

Live Demo

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

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

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

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

  • нет — нет границы. (Эквивалент ширины контура: 0;)

  • сплошной — контур представляет собой одну сплошную линию.

  • пунктир — контур представляет собой серию точек.

  • пунктир — контур представляет собой серию коротких линий.

  • двойной — контур две сплошные линии.

  • groove — контур выглядит так, как будто он вырезан на странице.

  • Гребень — контур выглядит противоположно канавке.

  • вставка — контур делает окно таким, как будто оно встроено в страницу.

  • outset — контур делает окно таким, как будто оно выходит из холста.

  • скрытый — такой же, как никто.

нет — нет границы. (Эквивалент ширины контура: 0;)

сплошной — контур представляет собой одну сплошную линию.

пунктир — контур представляет собой серию точек.

пунктир — контур представляет собой серию коротких линий.

двойной — контур две сплошные линии.

groove — контур выглядит так, как будто он вырезан на странице.

Гребень — контур выглядит противоположно канавке.

вставка — контур делает окно таким, как будто оно встроено в страницу.

outset — контур делает окно таким, как будто оно выходит из холста.

скрытый — такой же, как никто.

Вот пример —

Live Demo 

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

Вот пример —

Live Demo 

<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 является сокращенным свойством, которое позволяет указывать значения для любого из трех свойств, обсужденных ранее, в любом порядке, но в одном выражении.

Вот пример —

Live Demo 

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

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

41
Share: