渐变-文字&背景渐变

渐变-文字&背景渐变

---

文字渐变：

ps:兼容性问题较为严重

①：

background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216)));
-webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */
-webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色： */

  <!--[if IE]>
        <h2>IE才能看见我</h2>
        <img src="images/text-gradient.png" alt="">
    <![endif]-->

background-clip 属性 规定背景的绘制区域

②：

 

 h1{
        position: relative;
        color: yellow;
    }

/*:before 选择器向选定的元素 前 插入内容。 
  使用content 属性来指定要插入的内容。*/

 h1:before{
        content: attr(text);
        position: absolute;
        z-index: 10;
        color:pink;
        -webkit-mask:linear-gradient(to left, red, transparent );
    }

 

content: attr(text);

能获取到元素的 text 属性，这里的这个text属性是自己自定义的一个属性，你也可以在元素中加一个 tt 属性，像这样
<h1 tt="前端简单说">前端简单说</h1>
然后content属性 这样写，content: attr(tt); 同样是可以起作用的。

mask:和ps的图层蒙版叠加很像

兼容性：只有webkit内核的浏览器支持mask属性，所以考虑到兼容性的话，用mask属性的时候还是要想想的。

 

参考：简单说 CSS中的mask—好好利用mask-image

 

背景渐变：

ps:IE8,9，以及Opera Mini 不兼容，其他兼容

 

/*对角线渐变*/
background: linear-gradient(to top right, #f6f5f0, #fefefd);
background: linear-gradient(to top right, #CDDC39, #8BC34A, #FFEB3B);
background: linear-gradient(to top right, #CDDC39 0%, #8BC34A 25%, #FFEB3B 100%);
/*径向渐变*/
background: radial-gradient(circle, #CDDC39, #8BC34A);

 

第一个参数有两个值：

circle正圆，ellipse椭圆。 默认从圆心向四周渐变。也可以用两个长度数字来表示圆形，比如50px 50px。有这样几种写法：

circle at center （或者left right）

circle at 50% （这个百分比数字可以改成任意想要的位置）

circle farthest-corner （或者其他3个值。）