CSS常用渐变-html教程-PHP中文网

首页

web前端

html教程

CSS常用渐变

Sep 21, 2016 pm 01:56 PM

边框渐变：

<span style="color: #008080;">1</span> <span style="color: #800000;">border-image: -webkit-linear-gradient( red , blue) 30 30;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-image: -moz-linear-gradient( red, blue) 30 30;
</span><span style="color: #008080;">3</span> <span style="color: #800000;">border-image: linear-gradient( red , blue) 30 30;</span>

登录后复制

文字渐变：（只支持-webkit-）

<span style="color: #008080;">1</span> <span style="color: #800000;">background-image: -webkit-gradient(linear, 0 0, 0 80%, from(nth($color7, 3)), to(nth($color7, 4)));
</span><span style="color: #008080;">2</span> <span style="color: #800000;">-webkit-background-clip: text;
</span><span style="color: #008080;">3</span> <span style="color: #800000;">-webkit-text-fill-color: transparent;</span>

登录后复制

背景渐变：

<span style="color: #008080;">1</span> <span style="color: #800000;">filter: alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
</span><span style="color: #008080;">2</span> <span style="color: #800000;">-ms-filter: alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);  
</span><span style="color: #008080;">3</span> <span style="color: #800000;">background: red; </span><span style="color: #008000;">/*</span><span style="color: #008000;"> 一些不支持背景渐变的浏览器 </span><span style="color: #008000;">*/</span>  
<span style="color: #008080;">4</span> <span style="color: #800000;">background: -moz-linear-gradient(top, red, blue);  
</span><span style="color: #008080;">5</span> <span style="color: #800000;">background: -webkit-gradient(linear, 0 0, 0 bottom, from(red), to(blue));</span>

登录后复制