其他分享
首页 > 其他分享> > 03-lao-CSS3新增颜色表示和盒子透明

03-lao-CSS3新增颜色表示和盒子透明

作者:互联网

<head>
		<meta charset="UTF-8">
		<title>颜色</title>
		<style type="text/css">
			.box{
				/* rgba : a:透明度 ,0完全透明~1完全透明*/
				background-color: rgba(44,200,89,1);
				height: 100px;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box" >
			
		</div>
	</body>

 

  

<head>
		<meta charset="UTF-8">
		<title>颜色</title>
		<style type="text/css">
			.box1{
				/* rgba : a:透明度 ,0完全透明~1完全透明*/
				background-color: rgba(44,200,89,1);
				height: 100px;
				width: 100px;
			}
			.box2{     /* 知道就可以了  四个参数 */
				background-color: hsla(120,10%,30%,1);
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="box1" >
			
		</div>
		<div class="box2" >
			wrw
		</div>
	</body>

<html>
	<head>
		<meta charset="UTF-8">
		<title>颜色</title>
		<style type="text/css">
			.box1{
				/* rgba : a:透明度 ,0完全透明~1完全透明*/
				background-color: rgba(44,200,89,1);
				height: 100px;
				width: 100px;
			}
			.box2{     /* 知道就可以了  四个参数 */
				background-color: hsla(120,10%,30%,1);
				width: 200px;
				height: 200px;
				
				/*整个盒子的透明度0~!*/
				opacity: 0.5;
			}
		</style>
	</head>
	<body>
		<div class="box1" >
			
		</div>
		<div class="box2" >
			wrw
		</div>
	</body>

 

 

标签:CSS3,03,lao,background,color,100px,height,width,rgba
来源: https://blog.csdn.net/huantingyizhan/article/details/95745523