CSS颜色渐变

最新推荐文章于 2024-06-08 08:33:20 发布

Bear

最新推荐文章于 2024-06-08 08:33:20 发布

阅读量344

点赞数

分类专栏： HTML与CSS 文章标签： css 颜色渐变

本文链接：https://blog.csdn.net/bear_huangzhen/article/details/100775330

版权

HTML与CSS 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

使用角度

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

语法

background: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

使用透明度（transparent）

CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

CSS3 径向渐变

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

语法

background: radial-gradient(center, shape size, start-color, ..., last-color);

示例1（线性渐变）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>颜色渐变1</title>
		<style type="text/css">
			div{
				width: 350px;
				height: 60px;
				margin-top: 5px;
				line-height: 60px;
				text-align: center;
				font-family: "arial rounded mt bold";
				font-weight: bold;
				font-size: 25px;
				color: #FFF;
			}
			
			#a{
				background: linear-gradient(180deg,#8C9EFE,#3959FA);
                                /*线性渐变*/
			}
			
			#b{
				background: linear-gradient(180deg,#FC4E02,#922D00);
			}
			
			#c{
				background: linear-gradient(180deg,#C3FB00,#588900);
			}
			
		</style>
	</head>
	<body>
		<div id="a">
			FireFox
		</div>
		<div id="b">
			Google Chrome
		</div>
		<div id="c">
			Internet Explorer
		</div>
	</body>
</html>

示例2（线性渐变）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>颜色渐变2</title>
		
		<style type="text/css">
			
			*{
				margin: 0px;
				padding: 0px;
			}
			
			#main{
				width: 350px;
				margin: 0px auto;
			}
			
			#topbar{
				width: 320px;
				height: 40px;
				background: linear-gradient(#0668AD,#B4DAF4); /*颜色渐变*/
				
				color: white;
				font-size: 20px;
				font-weight: bold;
				line-height: 40px;
				padding-left: 30px;
			}
			
			#main h2{
				width: 270px;
				height: 30px;
				margin-left: 50px;
				font-size: 14px;
				line-height: 30px;
				color: #0565C6;
				padding-left: 30px;
				background: linear-gradient(#E3F1FA,#BEDFF7,#E3F1FA); 
				/*颜色连续变化*/
				margin-top: 30px;
				
			}
			
			#main ul{
				list-style: none;
				margin-left: 50px;
				margin-top: 20px;
			}
			
			#main ul li{
				height: 25px;
				line-height: 25px;
			}
			
			#main ul li a{
				color: #666666;
				font-weight: 400;
				text-decoration: none;
				
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<div id="topbar">
				家用电器
			</div>
			
			<h2>
				大家电
			</h2>
			
			<ul>
				<li>
					<a href="#">平板电视</a>
					<a href="#">洗衣机</a>
					<a href="#">冰箱</a>
				</li>
				<li>
					<a href="#">空调</a>
					<a href="#">烟机/灶具</a>
					<a href="#">热水器</a>
				</li>
				<li>
					<a href="#">电风扇</a>
					<a href="#">净化器</a>
					<a href="#">吸尘器</a>
				</li>
			</ul>
			<h2>
				生活电器
			</h2>
			<ul>
				<li>
					<a href="#">电风扇</a>
					<a href="#">净化器</a>
					<a href="#">吸尘器</a>
				</li>
				<li>
					<a href="#">净水设备</a>
					<a href="#">挂烫机</a>
					<a href="#">电话机</a>
				</li>
			</ul>
			<h2>
				厨房电器
			</h2>
			<ul>
				<li>
					<a href="#">榨汁机</a>
					<a href="#">电压力锅</a>
					<a href="#">电饭煲</a>
				</li>
				<li>
					<a href="#">豆浆机</a>
					<a href="#">微波炉</a>
					<a href="#">电磁炉</a>
				</li>
			</ul>
			<h2>
				五金家装
			</h2>
			<ul>
				<li>
					<a href="#">淋浴/水槽</a>
					<a href="#">电动工具</a>
					<a href="#">手动工具</a>
				</li>
				<li>
					<a href="#">仪器仪表</a>
					<a href="#">浴霸/排气</a>
					<a href="#">灯具</a>
				</li>
			</ul>
		</div>
	</body>
</html>

示例3（线性渐变+背景重叠）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>颜色渐变3</title>
		<style type="text/css">
			
			div{
				width: 300px;
				height: 150px;
				/*渐变背景与图片背景重叠产生的图片效果*/
                background: linear-gradient(90deg, rgba(255,0,0,0.1), rgba(255,0,0,0.7)), url(img/flower.png);
                background-size: cover; 
			}
			
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

示例4（径向渐变）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>颜色渐变4</title>
		<style type="text/css">
			div{
				position: relative;
				width: 200px; 
				height: 100px;
    			background: red;
			}
			
			div:after{
				content: '';
    			position: absolute;
    			height: 10px;
    			left:0 ; 
    			right: 0;
    			bottom: -10px;
    			background: radial-gradient(20px 15px ellipse at top, red 10px, transparent 11px);
    			background-size: 20px 10px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

示例5（线性渐变+径向渐变）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>颜色渐变5</title>
		<style type="text/css">
			
			div{
				position: relative;
				width: 262px;
				height: 262px;
				border-radius: 50%; /*设置为圆形*/
				
				background: 
				linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, 
				linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, 
				repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
				background-size: 50% 100%, 100% 50%, 100% 100%;
			}
			
			div:after{
				position: absolute;
    			top: 50%; 
    			left: 50%;
    			margin: -35px;
   	 			border: solid 1px #d9a388;
    			width: 68px; 
    			height: 68px;
    			border-radius: 50%; /*设置为圆形*/
    			box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
    			background: #b5ac9a;
    			content: '';
			}
			
		</style>
	</head>
	<body>
		
		<div></div>
		
	</body>
</html>

Bear

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS颜色渐变

使用角度如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。语法background: linear-gradient(angle,color-stop1,color-stop2);角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0de...
复制链接

扫一扫