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

108

Есть ли способ интегрировать рамку вокруг текста, как на изображении ниже?

текстовая граница

text css jho1086
источник

222

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

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>

Развернуть фрагмент

В качестве альтернативы вы можете использовать текстовый штрих, который работает только в webkit:

-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;

введите описание изображения здесь

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  -webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
}

<h1>test</h1>

Развернуть фрагмент

Также читайте больше как CSS-Tricks.

bookcasey
источник

СТОИТ ЗАМЕТИТЬ: Пожалуйста, проверьте кроссбраузерные возможности этих методов ... У меня серьезные проблемы с клиентами на IE по крайней мере 9 ... вроде бы думаю пойти по пути PNG.

ErickBest 02

1

@ErickBest Во второй ссылке упоминаются проблемы IE9. Хотя эту страницу было нетрудно найти на google caniuse.com/css-textshadow

AnnanFay

Вызывает плохое отображение текста с прозрачностью (с использованием rgba).

Алехандро Нава,

14

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

text-shadow: 0 0 2px #fff;

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

jtheman
источник

1

Я уже пробовал это, сэр, но мне нужен сплошной белый текст вокруг текста.

jho1086

8

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

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

Развернуть фрагмент

удержаны
источник

1

спасибо, что поделились своим решением. Думаю, ваше право более гибкое. Но в большинстве случаев более эффективно использовать CSS. Я попробую использовать SVG позже.

jho1086

6

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

Chezwhite
источник

3

Вы также можете добавить объяснение?

Роберт

5

Следующее будет охватывать все браузеры, о которых стоит рассказать:

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

dtbarne
источник

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

Ответы: