Есть ли способ избежать свойства маски-изображения затронуть текст внутри контейнера? ⇐ Html

[Anonymous]

Я пытаюсь отформатировать текстовое поле, содержащее изображение маски с линейным градиентом, но я не хочу, чтобы маска также влияла на текст и оставалась непрозрачной.
Есть ли какой-либо другой возможный метод, о котором я не знаю, чтобы добиться того, что я хочу?
Я попробовал вместо этого поместить линейное градиентное в свойство фона, но затем Свойство border-radius не работает, и на той стороне, где она должна быть прозрачной, есть сплошная цветная линия. Я также хочу использовать маску-изображение, так как хочу, чтобы граница также исчезала так же, как и текстовое поле.
Это код, который я использую в данный момент.

Код: Выделить всё

.option  {
width: 200px;
padding: 4px 0px 8px 10px;
background-color: rgba(9, 26, 50, 1);
mask-image: linear-gradient(to right, rgba(9, 26, 50, 0.8), rgba(9, 26, 50, 0.8), rgba(9, 26, 50, 0.6), rgba(9, 26, 50, 0.2), rgba(9, 26, 50, 0));
border-radius: 20px 0px 0px 20px;
border-style: double;
border-color: rgb(177, 172, 159);
}
.optiontext  {
font: bold 17px 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
text-align: left;
color: rgb(231, 228, 206);
}

Я не очень разбираюсь в кодировании CSS и HTML и не могу найти ничего, что могло бы решить эту проблему. Я совершенно не понимаю, как решить эту проблему, если это вообще возможно с помощью CSS.

Подробнее здесь: https://stackoverflow.com/questions/797 ... t-inside-t