欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

常用效果渐变-css、css3

程序员文章站 2022-05-11 08:17:49
...

记笔记,方便查询使用!

一、css中使得border渐变方法

/*
* 方法一  可多颜色 - 135deg是渐变的角度 - 
*/
background-clip:padding-box,border-box;
background-origin:padding-box,border-box;
background-image:linear-gradient(135deg,#000,#000),linear-gradient(135deg,#E70303,#FFFF44);
border:2px transparent solid;


/*
* 方法二   后面两个值为:图片边框向内偏移,图片边框的宽度  试了一下不怎么好用
*/
border:10px solid #ddd;
border-image: -webkit-linear-gradient( red , blue) 30 30;
border-image: -moz-linear-gradient( red, blue) 30 30;
border-image: linear-gradient( red , blue) 30 30;

/*
* 方法三   
*/
切图,使用渐变的图片为背景

二、文字TXT的渐变

文章关键字 ‘文字渐变’

/*
* 方法一  推荐使用   text-fill-color与mask-image属性貌似就webkit核心的浏览器支持
*/
<h2 class="text-gradient">文字</h2>
.text-gradient{
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

-------------------------------------

background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
/* 
* 方法二  使用mask-image属性  text-fill-color与mask-image属性貌似就webkit核心的浏览器支持
*/
<h2 class="text-gradient" data-text="文字">文字</h2> 
.text-gradient {  
    display: inline-block;
    font-family: '微软雅黑';
    font-size: 10em;
    position: relative; 
}  
  
.text-gradient[data-text]::after {  
    content: attr(data-text);  
    color: green;  
    position: absolute;  
    left: 0;  
    z-index: 2;
    -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0)));
}

-------------------------------------

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

 

相关标签: css css3