CSS Text Border С Перетяжка

-1

Я прочитал о тексте границы здесь:CSS Text Border С Перетяжка

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

Это то, что я пытаюсь достичь:

Это то, что я сделал до сих пор (это неверно, так как граница связана с текстом):

<style> 
 
h1 { 
 
    color: yellow; 
 
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 
 
} 
 
</style> 
 
<h1>Hello World</h1>

Извините, если вы не можете меня понять, я имею в виду, что Мне нужна граница вокруг текста с прозрачным пространством, но я понятия не имею, как этого добиться.

Я также не могу использовать изображение в качестве замены текста.

источник

2017-01-05 user6668201

ли вы имеете в виду, что вы хотите прозрачную рамку вокруг букв? –

нет, я хочу показать границу, но сделать пробел между текстом и границей прозрачным – user6668201

Вы пробовали svg? –

Что вы просите не представляется возможным. Особенно требование сделать внешнюю границу прозрачности. В то время как box-shadow имеет свойство вставки, text-shadow нет. Фоновый клип может создавать интересные эффекты в сочетании с text-shadow, но ничего похожего на то, что вы ищете.

span{font-size: 300px; 
 
font-weight:bold; 
 
font-family: Arial, 'sans-serif'; 
 
background-color: #ed5c65; 
 
color: transparent; 
 
text-shadow: 4px 4px 4px rgba(255,255,255,0.3); 
 
-webkit-background-clip: text; 
 
-moz-background-clip: text; 
 
background-clip: text; 
 
}

<span>M</span>

https://jsfiddle.net/3ttgv3ng/

источник

2017-01-05 12:33:46

ouch :(но я уверен, что еще есть способ сделать это .... – user6668201

Возможно, сэр, проверьте мою скрипку http://jsfiddle.net/fvHJq/1540/ –

@NikunjSardhara вы удваиваете текст и разметку Я не думаю, что это приемлемо для незначительного эффекта css. Хотя, это зависит от OP, чтобы решить, что с ним работает. –

Нам просто нужно правильно управлять css.

Я подготовил jsfiddle here.

Добро пожаловать.

#text{ 
 
    font-size:30px; 
 
    font-weight:100; 
 
    font-family:arial; 
 
    color:black; 
 
    position:absolute; 
 
    left:4px; 
 
    top:7px; 
 
} 
 
#borders{ 
 
    font-size:40px; 
 
    font-weight:900; 
 
    font-family:arial; 
 
    color:white; 
 
    -webkit-text-stroke-width: 1px; 
 
    -webkit-text-stroke-color: black; 
 
    }

<div id="text">M</div><div id="borders">M</div>

источник

2017-01-05 12:30:05

как изображение: http://i.imgur.com/4dC2GiG.png, слово M находится за пределами границы в форме M, и мне нужно слово M is внутри границы в форме M – user6668201

Я подготовил скрипку, проверьте здесь http://jsfiddle.net/fvHJq/1540/ –

все равно: http://i.imgur.com/nJfef9n.png: \ – user6668201

-1

Проверьте это!

h1 { 
 
\t font-size:80px; 
 
    /* WebKit (Safari/Chrome) Only */ 
 
    -webkit-text-stroke: 1px black; 
 
    
 
    /* If we weren't using text-shadow, we'd set a fallback color 
 
    and use this to set color instead 
 
    -webkit-text-fill-color: white; */ 
 
    color: white; 
 
    
 
    text-shadow: 
 
    3px 3px 0 #000, 
 
    /* Simulated effect for Firefox and Opera 
 
     and nice enhancement for WebKit */ 
 
    -1px -1px 0 #000, 
 
    1px -1px 0 #000, 
 
    -1px 1px 0 #000, 
 
    1px 1px 0 #000; 
 
}

<h1>M O H A N</h1>

источник

2017-01-05 12:37:25

почти как то, что я пытаюсь достичь, но все же это только «почти», я найду еще один ответ первым прежде чем подумать об этом – user6668201

Мне также нужен текст не только границы – user6668201

CSS Text Border С Перетяжка

ответ

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