Почему этот простой HTML-текст CSS CSS не работает?

Моя конечная цель - сделать так: http://codepen.io/yoksel/pen/XJbzrO (внизу страницы). Но я не могу даже получить этот простой текст, чтобы работать.Почему этот простой HTML-текст CSS CSS не работает?

<!DOCTYPE html> 

<html lang = "en-US"> 
    <head> 
    <title> Test </title> 
    <style> 
     #title { 
      color: blue; 
      stroke: red; 
      stroke-width: 2px; 
     } 
    </style> 
    </head> 

    <body> 
    <h1 id="title">This is some text</h1> 
    </body> 
</html>

Решение должно работать во всех основных браузерах. Я использую Google Chrome. Если удар не может быть выполнен таким образом, пожалуйста, не предлагайте использовать тени. Я не могу превратить тени в желаемый эффект.

источник

2016-07-13 Daniel Williams

Вы знаете, что перо использует svg-s –

@ Bálint Я новичок в HTML и CSS, и я не уверен, что это значит. –

SVG - это элемент, который позволяет свободно векторной графики с кодом. Stroke является исключительной собственностью для этого –

Свойство stroke существует в CSS, но оно работает только с элементами SVG. Существует свойство -webkit-text-stroke, которое может быть применено к обычным текстовым элементам, но оно нестандартно и не работает в Internet Explorer.

Чтобы получить эффект, который вы ищете, у вас есть 2 варианта: используйте нестандартное свойство или оберните текст в элементе SVG.

h1 { 
 
    color: blue; 
 
    -webkit-text-stroke: 2px red; 
 
} 
 
text { 
 
    fill: blue; 
 
    stroke: red; 
 
    stroke-width: 2px; 
 
    font-size:2em; 
 
    font-weight: bold; 
 
}

<h1>Nonstandard -webkit-text-stroke</h1> 
 
<svg> 
 
    <text text-anchor="top" y="50%">SVG Element</text> 
 
</svg>

источник

2016-07-13 22:50:41

@ Bálint - http://caniuse.com/#feat=svg –

Извините, сообщение, в котором я был изначально хотел опубликовать это сообщение, был удален –

Вы пытаетесь применить свойство SVG "обводки" в HTML-тег. Это ваша проблема.

Вы можете преобразовать свой текст в объект svg, а затем в основном скопировать эффект из этого ручка кода, и он должен работать нормально. SVG, как это, является довольно кросс-браузером, если вы придерживаетесь всего лишь штриха и некоторых анимаций ключевых кадров.

Единственное, что вы хотели бы сделать, - это сделать что-то еще для вашего тега h1 по причинам SEO.

Я не собираюсь создавать рабочий пример, так как у вас уже есть один из ручек кода.

источник

2016-07-13 22:52:18 nordicnomad

Почему этот простой HTML-текст CSS CSS не работает?

ответ

Смежные вопросы