CSS | Свойство в стиле схемы

Опубликовано: 5 Января, 2022

Свойство outline-style в CSS используется для установки внешнего вида контура элемента. Контур и граница элемента похожи, но не одинаковы. Контур не занимает места и рисуется за пределами границы элемента. Кроме того, по умолчанию контур рисуется вокруг всех четырех сторон элемента, и изменить это невозможно.

Синтаксис:

 стиль контура: авто | нет | пунктирная | пунктирная | сплошная | двойная | канавка | гребень |
вставка | начало | начальная | наследование;

Стоимость недвижимости:

auto: устанавливает контур элемента через браузер.

Синтаксис:

 стиль контура: авто;

Пример:

 <!DOCTYPE html>
 < html >
    < head >
        < title >
            CSS outline-style property
        </ title >
     
        <!-- Internal CSS Style Sheet -->
        < style >
            h1 {
                color: green;
                text-align: center;
                 
                /* CSS Property for outline-style */
                outline-style: auto;
            }
        </ style >
     
    </ head >
     
    < body >
        <!-- outline-style: auto;-->
        < h1 >GeeksForGeeks</ h1 >
    </ body >
 </ html > 

Выход:

none: это значение по умолчанию, оно устанавливает нулевую ширину контура. Следовательно, это не видно.

Синтаксис:

 стиль контура: нет;

Пример:

 <!DOCTYPE html>
 < html >
    < head >
        < title >
            CSS outline-style property
        </ title >
     
        <!-- Internal CSS Style Sheet -->
        < style >
            h1 {
                color: green;
                text-align: center;
                 
                /* CSS Property for outline-style */
                outline-style: none;
            }
        </ style >
     
    </ head >
     
    < body >
         
        <!-- outline-style: none;-->
        < h1 >GeeksForGeeks</ h1 >
    </ body >
 </ html > 

Выход:

dotted: используется для установки ряда точек вокруг элемента в виде контура.

Синтаксис:

 стиль контура: пунктирный;

Пример:

 <!DOCTYPE html>
 < html >
    < head >
        < title >
            CSS outline-style property
        </ title >
     
        <!-- Internal CSS Style Sheet -->
        < style >
            h1 {
                color: green;
                text-align: center;
                 
                /* CSS Property for outline-style */
                outline-style: dotted;
            }
        </ style >
     
    </ head >
     
    < body >
         
        <!-- outline-style: dotted;-->
        < h1 >GeeksForGeeks</ h1 >
    </ body >
 </ html > 

Выход:

dashed: используется для установки ряда сегментов пунктирной линии вокруг элемента в качестве контура.

Синтаксис:

 стиль контура: пунктирный;

Пример:

 <!DOCTYPE html>
 < html >
    < head >
        < title >
            CSS outline-style property
        </ title >
     
        <!-- Internal CSS Style Sheet -->
        < style >
            h1 {
                color: green;
                text-align: center;
                 
                /* CSS Property for outline-style */
                outline-style: dashed;
            }
        </ style >
     
    </ head >
     
    < body >
         
        <!-- outline-style: dashed;-->
        < h1 >GeeksForGeeks</ h1 >
    </ body >
 </ html > 

Выход:

solid: используется для установки сегмента сплошной линии вокруг элемента в качестве контура.

Синтаксис:

 стиль контура: сплошной;

Пример:

 <!DOCTYPE html>
 < html >
  < head >
    < title >CSS outline-style property</ title >
 
    <!-- Internal CSS Style Sheet -->
    < style >
      h1{
        color: green;
        text-align: center;
         
        /* CSS Property for outline-style */
        outline-style: solid;
      }
    </ style >
 
  </ head >
 
  < body >
      <!-- outline-style: solid;-->
      < h1 >GeeksForGeeks</ h1 >
  </ body >
 
</ html > 

Выход:

double: устанавливает удвоенные линейные сегменты вокруг элемента в качестве контура. Ширина контура равна сумме ширины отдельных отрезков линии и расстояния между ними.

Синтаксис:

 контурный стиль: двойной;

Пример:

 <!DOCTYPE html>
 < html >
  < head >
    < title >CSS outline-style property</ title >
 
    <!-- Internal CSS Style Sheet -->
    < style >
      h1{
        color: green;
        text-align: center;
         
        /* CSS Property for outline-style */
        outline-style: double;
      }
    </ style >
 
  </ head >
 
  < body >
      <!-- outline-style: double;-->
      < h1 >GeeksForGeeks</ h1 >
  </ body >
 
</ html > 

Выход:

паз: он устанавливает рифленые отрезки линии вокруг элемента в качестве контура, что создает ощущение, что он вырезан.

Синтаксис:

 контурный стиль: паз;

Пример:

 <!DOCTYPE html>
 < html >
    < head >
        < title >
            CSS outline-style property
        </ title >
     
        <!-- Internal CSS Style Sheet -->
        < style >
            h1 {
                color: green;
                text-align: center;
                outline-width: 8px;
                 
                /* CSS Property for outline-style */
                outline-style: groove;
            }
        </ style >
     
    </ head >
     
    < body >
         
        <!-- outline-style: groove;-->
        < h1 >GeeksForGeeks</ h1 >
    </ body >
 </ html > 

Выход:

гребень: он устанавливает ребристые линейные сегменты вокруг элемента в качестве контура, что создает ощущение выдавливания. Это противоположно канавке.

Синтаксис:

 контурный стиль: ребристый;

Пример:

 <!DOCTYPE html>
 < html >
    < head >
        < title >
            CSS outline-style property
        </ title >
     
        <!-- Internal CSS Style Sheet -->
        < style >
            h1 {
                color: green;
                text-align: center;
                outline-width: 8px;
                 
                /* CSS Property for outline-style */
                outline-style: ridge;
            }
        </ style >
    </ head >
     
    < body >
         
        <!-- outline-style: ridge;-->
        < h1 >GeeksForGeeks</ h1 >
    </ body >
 </ html > 

Выход:

inset: он устанавливает встроенные линейные сегменты вокруг элемента в качестве контура, что заставляет нас чувствовать, что он зафиксирован на дисплее.

Синтаксис:

 стиль контура: вставка;

Пример:

 <!DOCTYPE html>
 < html >
    < head >
        < title >
            CSS outline-style property
        </ title >
     
        <!-- Internal CSS Style Sheet -->
        < style >
            h1 {
                color: green;
                text-align: center;
                outline-width: 8px;
                 
                /* CSS Property for outline-style */
                outline-style: inset;
            }
        </ style >
    </ head >
     
    < body >
         
        <!-- outline-style: inset;-->
        < h1 >GeeksForGeeks</ h1 >
    </ body >
 </ html > 

Выход:

начало: устанавливает сегменты линии вокруг элемента, который кажется выходящим, как контур. Это противоположно вставке.

Синтаксис:

 наброски-стиль: начало;

Пример:

 <!DOCTYPE html>
 < html >
    < head >
        < title >
            CSS outline-style property
        </ title >
     
        <!-- Internal CSS Style Sheet -->
        < style >
            h1 {
                color: green;
                text-align: center;
                outline-width: 8px;
                 
                /* CSS Property for outline-style */
                outline-style: outset;
            }
        </ style >
    </ head >
     
    < body >
         
        <!-- outline-style: outset;-->
        < h1 >GeeksForGeeks</ h1 >
    </ body >
 </ html > 

Выход:

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

Синтаксис:

 стиль контура: начальный;

Пример:

 <!DOCTYPE html>
 < html >
    < head >
        < title >
            CSS outline-style property
        </ title >
     
        <!-- Internal CSS Style Sheet -->
        < style >
            h1 {
                color: green;
                text-align: center;
                outline-width: 5px;
                outline-color: black;
         
                /* CSS Property for outline-style */
                outline-style: initial;
            }
        </ style >
    </ head >
     
    < body >
         
        <!-- outline-style: initial;-->
        < h1 >GeeksForGeeks</ h1 >
    </ body >
 
</ html > 

Выход:

Наследовать: позволяет унаследовать свойство стиля контура от его родительского элемента.

Синтаксис:

 стиль контура: наследование;

Пример:

 <!DOCTYPE html>
 < html >
    < head >
        < title >
            CSS outline-style property
        </ title >
     
        <!-- Internal CSS Style Sheet -->
        < style >
            * {
                padding: 1px;
            }
            body {
                outline-style: dashed;
            }
            h1 {
                color: green;
                text-align: center;
                outline-width: 5px;
                outline-color: black;
         
                /* CSS Property for outline-style */
                outline-style: inherit;
            }
        </ style >
    </ head >
     
    < body >
         
        <!-- outline-style: inherit;-->
        < h1 >GeeksForGeeks</ h1 >
    </ body >
 </ html > 

Выход:

Поддерживаемые браузеры: Браузеры, поддерживаемые свойством outline-style , перечислены ниже:

Google Chrome 1.o
Internet Explorer 8
Firefox 1.5
Opera 7.0
Safari 1.2

Technical Scripter Picked CSS

CSS | Свойство в стиле схемы

РЕКОМЕНДУЕМЫЕ СТАТЬИ