W3docs
ru
Войти

Свойство CSS text-stroke-color

Use the text-stroke CSS property to specify the color of the stroke. See property values and try examples.

Свойство text-stroke-color задаёт цвет обводки символа. Начальным значением свойства text-stroke-color является currentColor.

Вы можете выбрать цвета здесь HTML цвета.

info

Свойство text-stroke-color является стандартным свойством CSS, но в настоящее время требует префикса -webkit- для широкой поддержки браузерами. Firefox пока не поддерживает его.

Начальное значениеcurrentColor
Применяется кКо всем элементам.
НаследуетсяДа.
АнимацияДа. Цвет можно анимировать.
ВерсияCSS Text Module Level 4
Синтаксис DOMobject.style.textStrokeColor = "#8ebf42";

Синтаксис

Значения CSS text-stroke-color

text-stroke-color: color | initial | inherit;

Пример свойства text-stroke-color:

Пример кода CSS text-stroke-color

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1em;
        margin-top: 2em;
      }
      p {
        margin: 0;
        font-size: 3em;
        -webkit-text-stroke-width: 2px;
        text-stroke-width: 2px;
        -webkit-text-stroke-color: #8ebf42;
        text-stroke-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Text-stroke-color property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
    <input type="color" value="#8ebf42" />
    <script>
      const input = document.querySelector('input[type="color"]');
      const p = document.querySelector('p');
      input.addEventListener('input', (e) => {
        p.style.webkitTextStrokeColor = e.target.value;
        p.style.textStrokeColor = e.target.value;
      });
    </script>
  </body>
</html>
Попробуйте сами »

Результат

SS text-stroke-color values list

Значения

ЗначениеОписание
colorЗадаёт цвет обводки. Можно использовать названия цветов, шестнадцатеричные коды, rgb(), rgba(), hsl(), hsla().
initialУстанавливает для свойства значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Практика

Практика

Значением по умолчанию для text-stroke-color является значение по умолчанию для