Граница текста с использованием css (граница вокруг текста)

Ответ 1

Используйте несколько теней текста:

text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

<h1>test</h1>

Ответ 2

Конечно. Вы можете использовать CSS3 text-shadow:

text-shadow: 0 0 2px #fff;

Однако он не будет отображаться во всех браузерах сразу. Использование библиотеки script, например Modernizr, поможет получить ее право в большинстве браузеров.

Ответ 3

Ниже перечислены все доступные браузеры:

text-shadow: 0 0 2px #fff; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Glow(Color=#ffffff,Strength=1); /* IE<10 */

Ответ 4

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

Ответ 5

Мне не нравятся такие решения, основанные на умножении текстовых теней, это не очень гибкий, он может работать для хода с 2 пикселями, где для добавления нужно 8, но с тремя направлениями инсульта - 16, и поэтому на... Не очень удобно управлять.

Правильный инструмент существует, он SVG <text> Проблема поддержки браузеров в этом случае ничего не стоит, потому что использование текстовой тени также имеет свою собственную проблему поддержки, filter: progid:DXImageTransform может использоваться или IE < 10, но часто не работает должным образом.

Для меня лучшим решением остается SVG с откатом в негладком тексте для более старого браузера:

Такой подход работает на всех версиях Chrome и Firefox, Safari с версии 3.04, Opera 8, IE 9

По сравнению с text-shadow, поддержка которых: Chrome 4.0, FF 3.5, IE 10, Safari 4.0, Opera 9, это еще более совместимо.

.stroke {
  margin: 0;
  font-family: arial;
  font-size:70px;
  font-weight: bold;
  }
  
  svg {
    display: block;
  }
  
  text {
    fill: black;
    stroke: red;
    stroke-width: 3;
  }

<p class="stroke">
  <svg xmlns="http://www.w3.org/2000/svg" width="700" height="72" viewBox="0 0 700 72">
    <text x="0" y="70">Stroked text</text>
  </svg>
</p>