css3的渐变

最新推荐文章于 2022-04-25 18:30:06 发布

Stirve unremitting

最新推荐文章于 2022-04-25 18:30:06 发布

阅读量163

点赞数

本文链接：https://blog.csdn.net/weixin_46421045/article/details/104825009

版权

浏览器兼容
```<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.box{
				margin:100px;
				width:200px;
				height: 200px;
				background: pink;	
					
				-webkit-box-shadow:10px 10px 10px 10px red;
				-moz-box-shadow:10px 10px 10px 10px red;
				-ms-box-shadow:10px 10px 10px 10px red;
				-o-box-shadow:10px 10px 10px 10px red;
				box-shadow:10px 10px 10px 10px red;/*盒子阴影*/
			}
		</style>
	</head>
	<body>
		<!--
			css3属性: 预览版,还没有一个正式的最终版,多以有很多的兼容性问题,浏览器不识别
			
			浏览器为了使这些属性兼容,每一个浏览器厂商都提供了一个属于自己的浏览器的语法规则,浏览器兼容前缀
			
			主流浏览器:
				谷歌  火狐 苹果 欧朋  ie
				
			浏览器前缀:
				-webkit-	谷歌浏览器
				-moz-		火狐浏览器
				-ms-		ie浏览器
				-o-			欧朋浏览器
				
			box-shadow:水平偏移量 垂直偏移量 模糊度 模糊大小 颜色;盒子阴影
		-->
		
		<div class="box"></div>
	</body>
</html>

```handlebars
线性渐变
```<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.box{
				width: 300px;
				height: 300px;
				/*background: -webkit-linear-gradient(left,red,yellow,pink);/*线性渐变
				background: -webkit-linear-gradient(right,red,yellow,pink);
				background: -webkit-linear-gradient(bottom,red,yellow,pink);
				background: -webkit-linear-gradient(top,red,yellow,pink);*/
				
				/*background: linear-gradient(to right,blue,yellow,green);
				background: -webkit-linear-gradient(right top,blue,yellow,green);
				
				background: linear-gradient(to right top,blue,yellow,green);
				
				background: -webkit-linear-gradient(10deg,blue,yellow,green);
			}*/
			
			background: linear-gradient(to right,blue 10%,yellow ,green);
			
			background: linear-gradient(to left,blue 100px,yellow 50px ,green);
			
		</style>
	</head>
	<body>
		<!--
			css3渐变: 由浏览器生成的
			
			线性渐变:
			background: -webkit-linear-gradient(方向,颜色1,颜色2,颜色3,....颜色n);
			background: linear-gradient(to 方向,颜色1,颜色2,颜色3,....颜色n);
			
			1 单一方向渐变: 
				left 从左边开始
				right 从右边开始
				top 从上边开始
				bottom   从底部开始
				注意: 需要添加兼容前缀
				
				to left 到左边(结束位置)
				to right 到右边
				to top	到顶部
				to bottom 到底部
				注意: 不要添加兼容前缀
			
			2 对角渐变:
				left top	左上开始
				left bottom 左下开始
				right top	右上开始
				注意: 带兼容前缀
				
				to left top 到左上(结束位置)
				注意: 不带兼容前缀
				
			3 角度的渐变
				10deg	10度
				
			4 默认情况下颜色趋于均分
				可以指定颜色分布的百分比,让颜色按照百分比进行渐变
				blue 10%	到10% 都是蓝色
				red	10px	到10px都是红色
				
			
				
			
			
		-->
		<div class="box"></div>
		
		
	</body>
</html>