테두리 그라디언트는 border-radius와 호환됩니까?
P粉824889650
2023-08-21 20:39:38
<p>둥근 테두리(border-radius)로 입력 상자의 스타일을 지정하고 테두리에 그라데이션 효과를 추가하려고 합니다. 그라데이션과 둥근 테두리를 성공적으로 만들 수 있지만 동시에 둘 다 만들 수는 없습니다. 둥근 모서리가 있지만 그라데이션이 없거나, 그라데이션이 있지만 둥근 모서리가 없습니다. </p>
<pre class="brush:php;toolbar:false;">-webkit-border-radius: 5px;
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0bbc4), to(#ced9de)) 1 100%;</pre>
<p>이 두 CSS 속성을 동시에 적용할 수 있는 방법이 있습니까, 아니면 불가능합니까? </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
이는 가능하며 추가 마크업이 필요하지 않으며 대신
ㅋㅋㅋ::after의사 요소 를 사용합니다.아래에 그라데이션 배경이 있는 의사 요소를 배치하고 자르는 작업이 포함됩니다. 이는 공급업체 접두사 또는 해킹(IE 포함) 없이 모든 현재 브라우저에서 작동하지만 이전 버전의 IE를 지원하려면 단색 대체, 자바스크립트 및/또는 사용자 정의 MSIE CSS 확장(예:
, 벡터) 사용을 고려해야 합니다. CSSPie 등과 같은 트릭).
jsfiddle 버전filter다음은 실제 예시입니다():
으아아아 으아아아
이 기능은 어떤 배경에서도 작동합니다box-shadow一起工作得很好，无论是否使用inset의사 요소에 그림자를 추가할 필요가 없습니다W3C 사양에 따르면 아마도 불가능할 것입니다:
이는
border-image일부 잠재적으로 복잡한 패턴이 채택될 수 있기 때문일 수 있습니다. 원형 이미지 테두리를 원할 경우 직접 만들어야 합니다.