그라데이션이 있는 테두리 이미지에 테두리 반경을 사용할 수 있나요?

Question

원형 테두리(테두리 반경)가 있는 입력 필드를 디자인하고 해당 테두리에 그라데이션을 추가하려고 합니다. 그라데이션과 원형 테두리를 성공적으로 만들 수 있지만 둘 다 함께 사용할 수는 없습니다. 그라디언트가 없는 둥근 모서리이거나 그라디언트가 있지만 둥근 모서리가 없는 테두리입니다.

-webkit-border-radius: 5px;
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0bbc4), to(#ced9de)) 1 100%;

두 개의 CSS 속성을 함께 작동시키는 방법이 있나요, 아니면 불가능합니까?

Answer 1

이는 가능하며 추가 마크업이 필요하지 않지만 ::after 의사 요소 를 사용합니다.

ㅋㅋㅋ

아래에 그라데이션 배경이 있는 의사 요소를 배치하고 자르는 작업이 포함됩니다. 이는 현재 공급업체 접두사 또는 해킹(IE 포함)이 없는 모든 브라우저에서 작동하지만 IE의 레트로 버전을 지원하려면 단색 대체, 자바스크립트 및/또는 사용자 정의 MSIE CSS 확장(예:

)을 고려해야 합니다.

, CSSPie - 벡터 스푸핑 등). 过滤器 예는 다음과 같습니다(

jsfiddle 버전

):

으아악 으아악

위의 추가 스타일링은 다음과 같습니다.

이 기능은 어떤 배경에서도 작동합니다

• 있든 없든 잘 작동합니다
• box-shadow、inset의사 요소에 그림자를 추가할 필요가 없습니다
이 역시 IE, Firefox 및 Webkit/Blink 브라우저에서 작동합니다.

Answer 2

W3C 사양에 따라 불가능할 수도 있습니다:

이는 border-image채택할 수 있는 잠재적으로 복잡한 패턴이 있기 때문일 수 있습니다. 원형 이미지 테두리를 원하는 경우 직접 만들어야 합니다.