css3--颜色和透明度

最新推荐文章于 2023-12-01 08:28:17 发布
您宁
最新推荐文章于 2023-12-01 08:28:17 发布
阅读量1.1k
点赞数
CC 4.0 BY-SA版权
分类专栏： css3 文章标签： css3
本文链接：https://blog.csdn.net/qw765811529/article/details/48524861
css3 专栏收录该内容
6 篇文章
订阅专栏
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04</title>
		
		<style>
			/*1*/
			.one{
				width: 50px;
				height: 50px;
				border: 1px solid #0000FF;
				background: rgb(255,0,0);/*红绿蓝*/
			}
			/*2*/
			.two{
				width: 50px;
				height: 50px;
				border: 1px solid #0000FF;
				background: rgba(255,0,0,0.5);/*红绿蓝 透明度*/
			}
			/*3*/
			.three{
				width: 50px;
				height: 50px;
				border: 1px solid #0000FF;
				/*
				 H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
   				 S：Saturation(饱和度)。取值为：0.0% - 100.0%
				 L：Lightness(亮度)。取值为：0.0% - 100.0%
				 */
				background: hsl(0,100%,50%);
			}
			/*4*/
			.four{
				width: 50px;
				height: 50px;
				border: 1px solid #0000FF;
				/*
				 A:Alpha透明度。取值0~1之间。
				 */
				background: hsla(0,100%,50%,0.5);
			}
			/*5*/
			.five{
				width: 50px;
				height: 50px;
				border: 1px solid #0000FF;			
				background:rgb(255,0,0);
				opacity:0.5;
				filter:Alpha(opacity=50);/*ie兼容性*/
			}
			/*6*/
			.six{
				width: 50px;
				height: 50px;
				border: 1px solid #0000FF;	
				background: transparent;/*用来指定全透明色彩。*/
			}
			/*7*/
			.seven{
				width: 300px;
				height: 50px;
				border: 1px solid #FF0000;
				/*
				 -moz-linear-gradient有三个参数。
				 第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。
				 第二个和第三个参数分别是起点颜色和终点颜色。
				 你还可以在它们之间插入更多的参数，表示多种颜色的渐变。
				 * */
				background: -moz-linear-gradient(top,#8fa1ff, #3757fa);/*firefox*/
			}
			/*8*/
			.eight{
				width: 300px;
				height: 50px;
				border: 1px solid #FF0000;
				/*
				 -webkit-gradient是webkit引擎对渐变的实现参数，一共有五个。

				第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（径向渐变）。

				第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如 left top（左上角）和left bottom（左下角）。

				第四个和第五个参数，分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。

				
				 * */
				background: -webkit-gradient(linear,0 0,0 bottom,color-stop(0,#ff4f02),color-stop(1,#8f2c00));/*Saf4+, Chrome*/
				/*
				 线性渐变使用from()以及to()方法指定过渡颜色点:
				 background: -webkit-gradient(linear, left top, left bottom, from(#96ff00), color-stop(0.5, orange), to(rgb(255, 0, 0)));
				 线性渐变多个过渡点在同一位置：
				 background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));
				 * */
			}
			/*9*/
			.nine{
				width: 300px;
				height: 50px;
				border: 1px solid #FF0000;
				/*ie 
				 IE依靠滤镜实现渐变。startColorstr表示起点的颜色，endColorstr表示终点颜色。GradientType表示渐变类型，0为缺省值，表示垂直渐变，1表示水平渐变。
				 * */
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00', endColorstr='#538300', GradientType='0'); /* IE*/
			}
			/*10*/
			.ten{
			  width: 400px;
			  height: 300px;
			  margin: 50px auto;
			  border: 5px solid hsla(60,50%,80%,.8);
			  background-image: -webkit-radial-gradient(hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
			  background-image: radial-gradient(hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
			}
			
			
		</style>
		
	</head>
	<body>
		<!--
        	作者：offline
        	时间：2015-09-17
        	描述：
        	RGBA - IE8及以下浏览器不支持这种写法

			HSL - IE8及以下浏览器不支持这种写法

			HSLA - IE8及以下浏览器不支持这种写法

			transparent - IE8及以下浏览器将文本颜色设置为transparent，文本将显示为黑色
        -->
		<div class="one"></div>
		<br />
		<div class="two"></div>
		<br />
		<div class="three"></div>
		<br />
		<div class="four"></div>
		<br />
		<div class="five"></div>
		<br />
		<div class="six"></div>
		<br />
		<div class="seven"></div>
		<br />
		<div class="eight"></div>
		<br />
		<div class="nine"></div>
		<br />
		<div class="ten"></div>
		<a href="http://www.w3cplus.com/css3/new-css3-radial-gradient.html">径向渐变</a>
		
		
	</body>
</html>
径向渐变