보이지 않는 흰색 텍스트 그림자보기

Question

DOM에 html 요소가 있습니다.

<h5 class="white-shadow"> Basic </h5> 

다음 CSS 규칙이 첨부되어 있습니다.

.white-shadow{ 
    text-shadow: -1px 0px 5px #ffffff; 
} 

h5은 회색 배경의 목록 요소 내에 있습니다. 아이디어는 더 나은 가독성을 위해 흰색 텍스트 그림자를 추가하는 것입니다. 이상한 점은 결과가 없다는 것입니다.

이것은 브라우저에서 보는 것입니다.

이 나를 보여주고 무엇을 DevTools로이다; 내가 빨간색 흰색에서 배경색을 변경하는 경우

는하지만 변화를 볼 수 있어요.

이것은 브라우저에서 보는 것입니다.

이 나를 보여주고 무엇을 DevTools로이다;

나는 텍스트 그림자 규칙의 알파 매개 변수를 감동하지 않았습니다. 어떤 이유로 흰색 텍스트 색상이 아닌 동안 빨간색 텍스트 그림자 색상이 표시됩니다.

어디서나 흰색 텍스트 그림자를 차단하고 있다고는 생각하지 않지만 bootstrap3을 사용하고 있습니다.

텍스트 주위에 흰색 그림자가 보이지 않는 이유는 무엇입니까? 내가 어떻게 고칠 수 있니? 중 하나를 변경

Answer 1

그림자는 DOM에 존재하지만, 때문에 당신의 background-color, 그것은 see here

나의 제안 많이 눈에 띄지 않습니다 shadow color 또는 background-color

here is what you want

사용

.white-shadow{ 
    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; 
} 

text-shadow 스레드에서 인용 된 값 : Text border using css (border around text)