常用效果渐变-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 );
}