我已经看到这种技术被大量使用了。就像说一个在两端淡出的分隔符边框(如stackoverflow标题的底部边框)。如何使用指南针实现这一目标?我搜索了他们的文档和谷歌,找不到任何如何做到这一点的例子。
问问题
460 次
1 回答
3
我从来没有使用过 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);
}
于 2012-05-26T14:40:16.060 回答