CSS. Можно ли добавить черный контур вокруг каждого символа в тексте?

спросил

Изменено 1 год, 7 месяцев назад

Просмотрено 70 тысяч раз

Я хотел бы добавить черный контур вокруг каждого символа, поэтому, если идентификатор шрифта находится на том же цвете фона, что и передний план, он все еще читается.

Можно ли это сделать в CSS с помощью CSS или без него?

1

Вы можете имитировать это с помощью свойства CSS 2.1 text-shadow :

 p {
    цвет: #fff;
    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}

Это, конечно, не поддерживается в IE9 и ниже. См. http://www.jsfiddle.net/yijiang/UCjgg/ для простой демонстрации.

2

Пока мы ждем, когда

text-stroke будет широко поддерживаться, есть довольно хороший генератор «text-shadow hack» для генерации свойства text-shadow, которое вам нужно.

https://owumaro.github.io/text-stroke-generator/

 h2 {
  цвет:#00ff19;
тень текста: rgb(0, 0, 0) 3px 0px 0px, rgb(0, 0, 0) 2.83487px 0.981584px 0px, rgb(0, 0, 0) 2.35766px 1.85511px 0px, rgb(0, 0, 0) 1.62091px 2.52441px 0px, rgb(0, 0, 0) 0.705713px 2.91581px 0px, rgb(0, 0, 0) -0.287171px 2.98622px 0px, rgb(0, 0, 0) -1.24844px 2.72789px 0px, rgb(0, 0, 0) -2.07227px 2.16926px 0px, rgb(0, 0, 0) -2.66798px 1.37182px 0px, rgb( 0, 0, 0) -2.96998px 0.42336px 0px, rgb(0, 0, 0) -2.94502px -0.571704px 0px, rgb(0, 0, 0) -2.59586px -1.50383px 0px, rgb(0, 0) , 0) -1.96093px -2.27041px 0px, rgb(0, 0, 0) -1.11013px -2.78704px 0px, rgb(0, 0, 0) -0.137119px -2.99686px 0px, rgb(0, 0, 0) ) 0.850987px -2.87677px 0px, rgb(0, 0, 0) 1.74541px -2.43999px 0px, rgb(0, 0, 0) 2.
 
 44769px -1.73459px 0px, rgb(0, 0, 0) 2.88051px -0.83 8247 пкс 0пкс;
} 
  
ура текст
0

Тени могут помочь.

 h2 {
   белый цвет;
   тень текста: черный 0px 0px 2px; /* смещение цвета-x смещение-y радиус размытия */
} 
  
Белый текст с черным контуром

Существует явный способ -webkit для добавления контура текста с помощью -text-stroke. Это экспериментальная реализация эквивалентного предложения по отслеживанию стандартов (называемого text-outline в документации спецификации CSS3).

Прежде чем я начну, я хочу уточнить, что ответ И Цзяна является правильным на ваш вопрос, как бы то ни было, я хотел немного добавить.

Если вам нужен совместимый способ сделать это, единственный способ, который я могу придумать, — это использовать шрифт с контуром по дизайну.

Вы даже можете использовать Google Font API и получить очень совместимое решение.

Удачи!

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — сделать границу только вокруг текста, а не всего блока

Задавать вопрос

спросил

1 год, 4 месяца назад

Изменено 1 год, 4 месяца назад

Просмотрено 2к раз

В следующем фрагменте граница ограничивает блок, а не только текст внутри него:

 . border {
  размер шрифта: 30px;
  выравнивание текста: по центру;
  граница: красная 2px сплошная;
} 
 
Подробнее!

Я попробовал встроенный блок , и он работает, однако я хочу, чтобы он располагался по центру страницы, а align-text / align-items

работает не работает в таком случае.

  • HTML
  • CSS
1

Вы можете использовать интервал только для слова, которое хотите поместить внутри абзаца. Кроме того, вам следует избегать называть класс «границей». Вот что я предлагаю:

 
Подробнее!

.заголовок{
    размер шрифта: 30px;
    выравнивание текста: по центру;
}
2

Если вам нужна рамка вокруг слова, используйте теги span. Если вам нужна рамка вокруг символов, используйте текст SVG и примените обводку (с шириной и цветом). А для центрирования встроенных элементов (отображение: встроенный/встроенный блок) вы должны установить свойство text-align для родительского элемента.

Оберните встроенный блок в div (элемент block ) и используйте для него text-align: center .

 .граница {
    размер шрифта: 30px;
    выравнивание текста: по центру;
    граница: красная 2px сплошная;
    отображение: встроенный блок;
}
#обертка {
  выравнивание текста: по центру;
}
 
 
Подробнее!

Вы можете применить класс к div следующим образом:

 
Подробнее!

<стиль>
.контейнер {
    отступ: 5px;
    размер шрифта: 30px;
    выравнивание текста: по центру;
    граница: красная 2px сплошная;
    маржа: авто;
    ширина: 30%;
}

Шрифты в Интернете представляют собой векторную графику, вы можете использовать -webkit-text-stroke , хотя он не поддерживается E11. Это сокращение для использования -webkit-text-fill-color , -webkit-text-stroke-width и -webkit-text-stroke-color . Таким образом, вы должны использовать что-то вроде:

 .
No related posts.