currentColor

currentColor

currentColor 키워드는 요소의 color 속성값을 나타낸다.

부모로 부터 물려 받는 color 값일 수 있고 현재 요소의 color 값을 받아 올 수 있다.

// 현재 요소의 color 값을 border 색상으로 지정
<div style="color: blue; border: 1px dashed currentColor;">
  이 글의 색은 파랑입니다.
  // 상위 요소의 color 값을 받아 옴 
  <div style="background: currentColor; height:9px;"></div>
  이 블록은 파란 테두리로 둘러쌓여 있습니다.
</div>

위 상황에서 내부 블럭에 color 값을 준다면 background는 해당 요소의 color 값으로 적용된다.

<div style="color: blue; border: 1px dashed currentColor;">
  이 글의 색은 파랑입니다.
  // 요소에 color 값을 추가 함.
  <div style="background: currentColor; height:9px; color:red;"></div>
  이 블록은 파란 테두리로 둘러쌓여 있습니다.
</div>

https://blog.adobe.com/en/publish/2015/02/24/extending-the-color-cascade-with-the-css-currentcolor-variable.html#gs.vqsp1pblog.adobe.com