CSS Ridge 테두리를 모방 할 수 있지만 사용자 정의 색상으로 가능합니까?

Question

나는 본질적으로 "Ridge"스타일 테두리가 있지만 사용자 정의 색상을 갖기를 원합니다. 와 함께 border-style: ridge 다른 색상을 넣을 수없는 것 같습니다. 브라우저는 지정된 색상보다 약간 더 가볍고 약간 어둡습니다.

내 현재 솔루션은 이것이지만 추가로 인해 이상적이지 않습니다. <div>

<div id="header">
  <!-- block with border-bottom set to `1px solid #2e3436`-->
</div>
<div style="height: 1px; background-color: #fbe995;"></div>

아래의 다음 항목은 상단 테두리가 해당 색상으로 설정할 수 없습니다 (고유 한 스타일이 있고 별개). 아이디어가 나옵니다. 내가 시도 할 수있는 다른 것이 있습니까?

Answer 1

예제는 요소 주변의 융기 테두리가 아닌 헤더와 나머지 사이의 분리기로 융기 줄을 생성하는 것이 좋습니다. 당신은 왜 a를 사용하지 않습니까? hr 그것에 대해, 그것은 정확히 무엇을위한 것이기 때문입니까?

그런 다음 테두리를주고 다른면에 자신의 색상을 설정할 수 있습니다.

Answer 2

CSS 3의 사양에 따라 (섹션 8.5.3) :

'그루브', '릿지', '삽입'및 '시작'의 값으로 그려진 테두리의 색상은 요소의 테두리 색상 특성에 따라 다르지만 UAS는 사용 된 실제 색상을 계산하기 위해 자체 알고리즘을 선택할 수 있습니다.

기술적으로 나는 "자체 알고리즘을 선택"하는 데 개발자가 설정할 수 있도록 허용 할 수 있지만이 시점에서는 사용자 에이전트가 그렇게하지 않는 것 같습니다. 물론, 그들이 그렇게하더라도 렌더링 엔진만을위한 솔루션이있을 것입니다.

Answer 3

공식적인 방법은 없지만 효과를 모방 할 수 있습니다. 융기 테두리는 실제로 삽입 된 경계 일뿐입니다. 그 자체는 그 자체가 그 주위에 처음 경계를 가지고 있습니다 (결국 왼쪽/상단 및 하단/오른쪽에 대해 약간 다른 테두리 색상을 가진 견고한 테두리입니다).

이 라인을 따라 무언가는 당신이 원하는 것, 또는 정확히 당신이 찾고 있던 것에 대한 좋은 근사치를 얻을 수 있어야합니다.

 .inset{
      margin:0px;
      border: 1px inset #abc;
 }
 .outset{
      padding:0px;
      border:1px outset #cba;
 }

<div class='outset'>
     <div class='inset'>
          content goes here
     </div>
</div>

Answer 4

<style>
.a
{
        border: solid yellow 2px;
        border-top-color:red;
        border-left-color:red;

}
.b
{
        border: solid red 2px;
        border-top-color:yellow;
        border-left-color:yellow;
}
</style>
<div class='a'>
  <div class='b'>
        some text
  </div>
</div>