헤더 아래 그라디언트 바가 있나요?

[orangeandblack5]

현재 CSS는 헤더 아래에 그림자 대신 바를 표시하도록 설정되어 있습니다:

.d-header {
  box-shadow: none;
  border-bottom: solid var(--my_header_box_color)
}

이 부분을 그라디언트로 만들고 싶다면, 가장 쉬운 방법은 무엇일까요? 다른 요소들은 그라디언트로 만들 수 있지만, 이 라인만 그렇게 하지 못하겠습니다.

[Don]

안녕하세요,

이것에는 mixin을 사용할 것 같습니다.

예시는 다음과 같습니다:

@mixin gradient-border() {
  border-image: linear-gradient(to right, orange, black);
  border-bottom: 5px solid;
  border-image-slice: 1;
}

그 다음 @include gradient-border()를 사용하여 .d-header나 원하는 곳에 적용할 수 있습니다.

.d-header {
  box-shadow: none;
  @include gradient-border();
}

[orangeandblack5]

모바일에서 이런 현상이 발생하는 이유가 무엇일지 혹시 아시는 분 계신가요?

[orangeandblack5]

모바일에서만 다음 코드가 작동했습니다:

    border-left: 0px solid;
    border-right: 0px solid;
    border-top: 0px solid;