css 线性渐变

傷城~ 2021-07-24 14:36 560阅读 0赞

线性渐变
    	background:linear-gradient(方向,颜色1，颜色2,..);
    		
    	方向默认从上往下
    	自定义方向:
    		to left  从右往左
    		to right 从左往右
    		to down  从上往下
    		to top   从下往上
    		to right bottom  对角，从左上到左下
    		
    	根据角度设置方向
    		360都圆盘
    		正上方为0deg，顺时针方向角度增加，从左到右为90deg，从右到左为270deg
    			background:linear-gradient(250deg,red,blue,yellow);
    	
    	重复渐变
    		background:repeat-linear-gradient(方向,颜色1，颜色2，截至颜色3 占据大小n%/npx，颜色4，截至颜色5 占据大小n%/npx );
    		
    		background:repeating-linear-gradient(to left,red, blue ,orange 20%, yellow 40%);
    		
    	设置变色中间点:两个颜色的渐变色范围
    		background:linear-gradient(to left,red,50%,blue); 红色百分之50，绿色百分之50

代码示例:

<html>
    	<head>
    		<meta charset="utf-8">
    		<title>渐变</title>
    		<style type="text/css">
    			.grad{ 
    				height:200px;
    				width: 200px;
    				background:linear-gradient(250deg,red,blue,yellow);
    			}
    			.div01{ 
    				height:200px;
    				width:300px;
    				border: 1px solid orange;
    				background:repeating-linear-gradient(to left,red, blue ,orange 20%, yellow 40%);
    			}
    		</style>
    	</head>
    	<body>
    		<div class="grad">
    			
    		</div>
    		<div class="div01">
    			
    		</div>
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，560人围观）

还没有评论，来说两句吧...

相关阅读

相关 css新特性：线性渐变详解(重复性线性渐变、径向渐变、重复性径向渐变的使用)

线性渐变线性渐变重复性线性渐变径向渐变重复性径向渐变的使用 -------------------- 线性渐变线性渐变是

￡神魔★判官ぃ/ 2024年03月30日 14:42/ 0 赞/ 59 阅读

相关 CSS 3种渐变效果（线性渐变，径向渐变，圆锥型渐变）

1 linear-gradient（线性渐变） 1.1按方向渐变语法： background: linear-gradient(direction, color

淩亂°似流年/ 2023年10月05日 11:05/ 0 赞/ 11 阅读

相关 CSS3-线性渐变

CSS 通过 `linear-grandient()` 函数来创建一个表示两种或多种颜色的线性渐变的“图像”；其结果属于 <gradient> 数据类型，是一种特别的 <ima

Myth丶恋晨/ 2023年07月02日 04:24/ 0 赞/ 106 阅读

相关 CSS3 线性渐变效果

CSS3 定义了两种类型的渐变（gradients）：线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向径向渐变（Radial

小鱼儿/ 2022年11月12日 08:25/ 0 赞/ 218 阅读

相关 CSS 渐变

CSS 渐变 CSS 渐变 CSS 线性渐变语法线性渐变 - 从上到下（默认）

爱被打了一巴掌/ 2022年11月11日 10:59/ 0 赞/ 217 阅读

相关 CSS线性渐变，径向渐变

线性渐变： background-image: linear-gradient(to bottom,red 0px,yellow 100px); ![watermark

曾经终败给现在/ 2022年09月03日 13:12/ 0 赞/ 247 阅读

相关 css3-颜色渐变线性径向

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

灰太狼/ 2022年07月14日 00:44/ 0 赞/ 256 阅读

相关 css中线性渐变兼容性处理

研究了一下css3中线性渐变的兼容性问题处理，本来是想要自己总结的，但是发现张鑫旭大神关于这个问题写的很清楚了，所以就直接转载了，写得很好，很清晰 IE浏览器下的渐变背景

淡淡的烟草味﹌/ 2022年05月24日 11:39/ 0 赞/ 256 阅读

相关 Canvas 线性渐变

一介绍渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。以下用来设置Canvas的线性渐变： createLinearGradien

女爷i/ 2022年05月12日 00:38/ 0 赞/ 276 阅读

相关 css 线性渐变

线性渐变 background:linear-gradient(方向,颜色1，颜色2,..); 方向默认从上往下自定义方向

傷城~/ 2021年07月24日 14:36/ 0 赞/ 561 阅读