освещенный элемент не показывает границу с rgba

Question

Мейби глупый вопрос, но, похоже, я не могу использовать rgba в моем lit-элементе.

Вы можете использовать HEXColors с rgba, как вы можете видеть в этом коде:

https://codepen.io/bassetts/pen/RqrPWG

И вы можете использовать переменные с rgba, как показано здесь:

https://codepen.io/finnhvman/post/theming-with-css-variables-in-rgba

Если использовать это решение, отрисовка границы:

border: 0.3rem solid rgba(var(--application-color, black), 0.3);//dont work

То же самое для этого

border: 0.3rem solid rgba(#000, 0.3);//dont work

Если я использую это решение, граница отрисовывает это работает.

border: 0.3rem solid rgba(250,0,0, 0.3); //Works!

Мой код:

 public render(): TemplateResult {
    return html`<div class="main-content">
        <div class=${classMap({  donut: this.loading })}></div>
        </div>
        `;
  }

public static get styles(): CSSResult {
    return css`
        :host {
          display: block;
        }
      .main-content {
        padding: 30px;
        background-color: #fafafa;
        text-align: center;
      }
      .donut {
        width: 2rem;
        height: 2rem;
        margin: 1rem;
        border-radius: 50%;
        border: 0.3rem solid rgba(var(--application-color, black), 0.3);//dont work
        //border: 0.3rem solid rgba(250,0,0, 0.3); //Works!
        border-top-color: var(--application-color, black);
        -webkit-animation: 1.5s spin infinite linear;
                animation: 1.5s spin infinite linear;
      }
      @keyframes spin {
        to {
          -webkit-transform: rotate(360deg);
                  transform: rotate(360deg);
        }
      }
      `;
  }

Есть идеи, что я делаю неправильно?

Answer 1

Хорошо, поэтому мне нужна помощь по добавлению альфа-значения в hexColor, поэтому вместо этого оно становится значением RRGGBBAA. Кто-нибудь знает, как это сделать?

пробовал это, ни один не работает:

  --bla: var(--application-color, #000000)4D; 
  border: 0.3rem solid var(--bla);

  border: 0.3rem solid var(--application-color, #000000)4D;

Это работает tho:

var(--application-color, #0000004D); 

Но --application-color не получается значение alpha / opacity только blackvalue (очевидно), поэтому оно не решает проблему с надстройкой alpha / opacity.

Answer 2

Вы должны использовать Transparentize, который является нахальным свойством. И тогда получите желаемый результат.

border: 0.3rem solid transparentize(#000, 0.3);