CSS3实现背景渐变和文字渐变

发布时间:2019-07-18 17:02:19 阅读:80

linear-gradient()属性介绍

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient></gradient>数据类型,是一种特别的<img />数据类型。

语法

.example {
    linear-gradient(45deg,blue,red); //渐变轴为45度,从蓝色渐变到红色
	
    linear-gradient(to left top,blue,red); //从右下到左上、从蓝色渐变到红色
	
    linear-gradient(0deg,blue,green 40%,red); //从下到上,从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束
} 

示例

	#example-element1{background: linear-gradient(#e66465, #9198e5);}  
	#example-element1{background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);}  
	#example-element1 {
    background: linear-gradient(217deg, rgba(255, 0, 0, .8), rgba(255, 0, 0, 0) 70.71%), linear-gradient(127deg, rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 70.71%), linear-gradient(336deg, rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%);
} 

角度渐变

可以为渐变轴某个位置指定某个颜色,这些位置可被称为“颜色中间点(color-stops)”。颜色会从一个颜色中间点平滑过渡到下一个。在渐变范围内,每个颜色都表现为一条垂直于渐变轴的直线。在下图中,渐变轴从左上角出发并且呈45度。渐变轴上定义了红色和蓝色两个颜色中间点。

<div id="example-element4" style="width: 200px; height: 200px;"></div>  #example-element4 {
    background: linear-gradient(45deg, red, blue);
}  

浏览器兼容前缀

	.grad { 
    background-color: #F07575; /* 不支持渐变的浏览器回退方案 */
    background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持 Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
    background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持 Firefox (3.6 to 15) */
    background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持旧 Opera (11.1 to 12.0) */ 
    background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* 标准语法; 需要最新版本 */
}  

文字渐变

文字渐变和背景渐变大同小异,都是通过linear-gradient属性来控制,只不过需要加上-webkit-background-clip: text属性。当-webkit-background-clip的属性值为text时,元素的背景被裁剪成文字的前景色。

	<div id="example-element5"></div>
#example-element-5 {
    background: linear-gradient(red, blue);
    -webkit-background-clip: text;
    color: transparent;
}
乐客互联

我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"CSS3实现背景渐变和文字渐变",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560