테두리 그라디언트는 border-radius와 호환됩니까?

Question

둥근 테두리(border-radius)로 입력 상자의 스타일을 지정하고 테두리에 그라데이션 효과를 추가하려고 합니다. 그라데이션과 둥근 테두리를 성공적으로 만들 수 있지만 동시에 둘 다 만들 수는 없습니다. 둥근 모서리가 있지만 그라데이션이 없거나, 그라데이션이 있지만 둥근 모서리가 없습니다.

-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 등과 같은 트릭). filter 다음은 실제 예시입니다(

jsfiddle 버전

):

으아아아 으아아아

위에 표시할 추가 스타일:

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

• 함께
• box-shadow一起工作得很好，无论是否使用inset의사 요소에 그림자를 추가할 필요가 없습니다
이 역시 IE, Firefox 및 Webkit/Blink 브라우저에서 작동합니다.

Answer 2

W3C 사양에 따르면 아마도 불가능할 것입니다:

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