شريط تدرج أسفل الرأس؟

[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;
}

بعد ذلك، يمكنك استخدامه على .d-header أو في أي مكان تريده باستخدام @include gradient-border()

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

[orangeandblack5]

أي فكرة لماذا قد يتسبب هذا في حدوث ذلك على الهاتف المحمول؟

[orangeandblack5]

لم ينجح استخدام ما يلي إلا للهاتف المحمول:

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