2013-04-28 4 views
7

이상한 것 - 두 줄 모두 밑줄 & 오버레이 을 표시하는 데 사용되는 simpel HTML 파일을 얻으려고합니다 (단, 텍스트의 "라인 스루"값에서도 발생합니다). (별도의 CSS 파일로 작성)하지만 확인하는 브라우저에서 작동하지 않음 (Chrome, Firefox, Opera, IE 및 Safari를 설치했습니다. 모두 최신 버전 일 수 있습니다. 크롬 버전 6 ...).텍스트 장식에 대해 여러 값을 가져올 수 없습니다.

다른 값을 삭제하고 하나만 지정하면 작동하지만 다른 텍스트를 추가 할 때 텍스트 장식 스타일의 모든 효과가 사라집니다.

누구나이 스타일의 문제에 대해 알고 있습니까?

미리 감사드립니다.

p.s. 그 값을 같은 줄에 넣고 있습니다. :

h1, h2 { 
    text-decoration: underline, overline, line-through; 
} 

답변

10

을 당신은 공간을 분리해서해야합니다

+0

관련 사양은 http://www.w3.org/TR/CSS2/text.html#lining-striking-props입니다. 여기서 "||"표기는 하나 이상의 값이 임의의 순서로 나타날 수 있음을 의미합니다. 공백으로 구분됩니다 (만). –

+1

감사합니다. 이것은 w3 사양에 대해 몰랐습니다! – keithwyland

-2

여러 값을 허용하는 텍스트 장식에 대한 사양을 본 적이 없습니다. 여기를 참조하십시오. http://www.w3.org/TR/CSS2/text.html#propdef-text-decoration (매일 새로운 것을 배우십시오)

다음과 같이하면 다른 방법으로 구현할 수 있습니다.

HTML

<p>Some text here and then <span class="underover">underline and overline</span> and some more text here.</p> 

CSS

.underover { 
    border-width: 1px 0; 
    border-style: solid; 
    border-color: blue blue red red; 
} 

예를 들어이 codepen를 참조하십시오 http://codepen.io/keithwyland/pen/Eagbz

+0

두 개의 값을 시도해 보았을 때 놀랍습니다. 무시! – keithwyland

0

nadavage로 합의                

h1, h2 { 
 
     text-decoration: underline overline line-through; 
 
    }
<h1> FUNNY </h1>
: 내가 너무 주위 재생과 발견 : 글꼴 또는 값이 지원되지 않는 경우에 대한 CSS에 쉼표. 그래서 내가 작성하는 경우 :             "로렘 입숨"는 운영 체제에 등록 된 글꼴의 이름 또는 수입하지 않으면

font-family: 'Lorem Ipsum', cursive; 

   이는 "필기체"글꼴을 보여줄 것이다, 대부분의 브라우저에서 지원됩니다. 귀하의 경우에는, 당신은 공간을 둘 것 한 번에 모두 수행 할 수 있지만, 대부분의 브라우저 파라미터 유효 각각의 값에 대해 무엇을 해독 할 수에 대해 같은

text-shadow: 2px 2px rgba(0, 0, 0, 0.4); 

여러 paremeters을 일부 속성은 하나 개의 값을 기대 어떤 매개 변수와 무엇을 사용해야하는지.

희망이 도움이됩니다.