가장자리에서 나침반/CSS 가장자리가 흐릿합니까?

Question

이 기술은 꽤 많이 사용되는 것을 보았습니다. 두 끝에서 페이드하는 구분자 테두리 (stackoverflow 헤더의 아래쪽 테두리처럼)를 말합니다. 나침반으로 어떻게 이것을 할 수 있습니까? 나는 그들의 문서와 구글을 수색했는데 이것을 어떻게하는지 예제를 찾을 수 없다.

Answer 1

Compass CSS를 사용한 적이 없지만 CSS와 SVG를 혼합하는 방법은 무엇입니까?

귀하의 SVG 파일 :

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
     <linearGradient id="div" x1="0%" y1="0%" x2="0%" y2="100%"> 
      <stop offset="0%" style="stop-color:rgb(255, 255, 225);stop-opacity:0"/> 
      <stop offset="50%" style="stop-color:rgb(153,153,153);stop-opacity:1"/> 
      <stop offset="100%" style="stop-color:rgb(255, 255, 225);stop-opacity:0"/> 
     </linearGradient> 
    </defs> 

<rect x="0" y="0" width="100%" height="100%" fill="url(#div)" /> 
</svg> 

CSS의 :

div.separator 
{ 
    width: 80%; 
    height: 16px; 
    background-image: url(gradient_file.svg); 
}