테두리 반경이 있는 그라데이션 테두리 만들기

Question

다음 CSS가 있습니다.

a.btn.white-grad {
    배경: $lgrey;
    색상: #313149 !중요;
    테두리: 1px 솔리드 #000;
    border-image-source: 선형 그라데이션(오른쪽으로, #9c20aa, #fb3570);
    테두리 이미지 슬라이스: 20;
    왼쪽으로 뜨다;
    @include 글꼴 크기(26);
    여백: 75px 0;
}

border-radius: 5px를 추가해도 아무런 효과가 없는 것 같습니다. 테두리 그라데이션을 사용하고 있기 때문인 것 같습니다. 원하는 5px 테두리 반경을 얻을 수 있는 방법이 있나요?

Answer 1

2023 - 단일 요소, ​​의사 요소 없음, SVG 없음, 마스크 없음.

사이트에서 본 내용이라 책임을 지지 않습니다. (사이트 이름을 잊어버려서 못찾겠습니다.)

• 둥근 모서리와 그라데이션 배경의 일반 버튼입니다
• inset的box-shadow를 사용하여 내부 흰색을 채웁니다
• 2px 테두리가 있고 실제로는 투명하므로 버튼 가장자리가 보입니다

으아아아 으아아아

Answer 2

2021: 투명성을 원한다면 현재 지원이 꽤 좋기 때문에 CSS 마스크 방법을 사용하는 것이 좋습니다

---

그라디언트에는 border-radius。这里有另一个想法，你可以依赖多个背景并调整background-clip를 사용할 수 없습니다.

으아아아 으아아아