border-color가 상속 된 값으로 인해 실패합니다.

Question

최근에 테두리 색에 문제가 있습니다.

border-color: inherit //work 
border-color: inherit transparent //fail 
border-color: transparent inherit //work 
border-color: inherit transparent transparent //fail 
border-color: inherit transparent transparent transparent //fail 

왜이 "첫 번째 값을 상속"국경 색깔이 실패 하는가?

Answer 1

border-color의 정의에 따르면 키워드 inherit은 다른 값과 함께 구성 요소가 아니라 속성 자체의 값으로 만 허용됩니다. 이 설명

[ <color> | transparent ]{1,4} | inherit 

의미입니다 : 당신이 1 ~ 4 개의 구성 요소를 가질 수 있습니다, 색상 지정 또는 키워드 등 transparen, 또는inherit 중 하나는 각각의.

관련된 오페라 버그가 있지만, 버그 대신이 해야이 사양으로 무슨 일을, 값 transparent inherit (및 transparent transparent inherit) "작품", 즉 당신이 무슨 뜻인지 않는다는 것입니다. CSS 오류 처리 규칙에 따르면 값이 구문 적으로 잘못된 경우 선언을 무시해야합니다. Chrome은 Opera와이 버그를 공유하지만 Firefox와 IE는 올바른 작업을 수행합니다. border-color: transparent inherit의 의미를 얻기 위해 (예 : 상단 테두리와 하단 테두리 색상을 투명하게 설정하고 좌우 테두리 색상을 상속 함) 예를 들어, border-color: transparent inherit을 얻으려면 별도의 선언문에서 개별 테두리 구성 요소를 한 가지 또는 다른 방식으로 설정해야합니다.

div { border-color: red } 
 
span { 
 
    border-style: solid; 
 
    border-color: transparent; 
 
    border-left-color: inherit; 
 
    border-right-color: inherit; 
 
}

<div> 
 
    <span>Hello world</span> 
 
</div>

Answer 2

CSS를 상속하는 키워드가 전부 또는 일부인 것 같아서 속기에서 사용할 수 없습니다. 당신이 얻는 결과는 '무효'규칙에 대한 일관성없는 해석을 반영합니다.

다음을 참조하십시오 : this discussion.

규칙 선언이 모두 유효한 경우 상속하려는 특정 속성을 무시할 수 있어야합니다. IE는 대신 :

border-color: inherit transparent; 

당신은 사용해야

border-color-left: transparent; 
border-color-right: transparent; 

는 불행하게도 당신이 그것보다 어떤 단축 할 수 있다고 생각하지 않습니다.