「css3渐变」11 - css3渐变

css3渐变

鼠标样式
透明度的使用以及兼容性写法(针对IE的大傻逼)
线性渐变
径向渐变

###鼠标样式(cursor)

规定当鼠标进入元素呢内容区域显示的光标类型

只需要修改cursor的对应的值

####cursor指针样式

cursor: default;/* 箭头 */
cursor: auto;/* 默认,根据浏览器设置的光标 */
cursor: move:/* 可拖拽的状态/可移动 */
cursor: pointer;/* 小手 */
cursor: crosshair;/* 十字架 */
/* 需要在写在css样式里面,针对小白提醒一下 */

####自定义指针样式

通过引入自己设定的自指针样式

依次检索加载,前面的不行,后面的备胎顶上去,需要用逗号分隔。

p{cursor: url("引入的鼠标资源的路径"),pointer;}

###透明度opacity

指定了一个元素的透明度,元素后面的背景被覆盖的程度

会让当前元素以及当前元素里面的子元素都设置成这个opacity,并且每一个层级的opacity叠加计算(乘法)

opacity数值(0-1)

0 完全透明
1完全不透明
介于0-1之间半透明

IE滤镜(IE8以下) filter:alpha(opacity=0-100)

0是完全透明
100是完全不透明

为了支持一些老版本的浏览器需要加上前缀

-moz-opacity: 0.5;
/* 小数前面的0可以删掉,变成.5 */

渐变

渐变是描述图片的,有规律的渐渐变化,在前端中通常指颜色的变化的实现方式,通常使用在所有接受图像的属性上,代替图片,意义是创建一张图片,也就是background-image的属性值。

线性渐变linear-gradient

第一个参数:渐变方向,从哪到哪发生渐变(to left,to right bottom,30deg顺时针)之类的,可以省略,默认是从上往下
第二个参数:颜色:位置百分比(px),规定哪种颜色从哪个位置开始发生渐变效果
第三个参数:颜色,位置百分比(px),规定哪种颜色到哪里变化结束
第一个参数可以省略,默认是从上往下(to bottom),后续每个参数描述某个关键点的位置的颜色,两个关键点之间渐变
方便理解参数所代表的含义:从某个部分开始到某个部分结束,第一个参数之后的每个参数描述某个关键点的位置的颜色,两个关键点之间渐变

还是通过例子来说,单单说有点无聊

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>小demo-德国国旗</title>
	<style>
		body{
			margin: 0;
		}
		.box{
			width: 700px;
			height: 460px;
            /* 黑色从33.3%开始变化,红色色从66.6%开始变化 */
			/*background-image: linear-gradient(#000 33.3%,rgb(221, 0, 0) 66.6%,rgb(255, 206, 0) 100%) ;*/
            /* 完美出现德国国旗的效果,所需要的代码 */
			background-image: linear-gradient(#000 33.3%,rgb(221, 0, 0) 33.3%,rgb(221, 0, 0) 66.6%,rgb(255, 206, 0) 66.6%) ;
		}
	</style>
</head>
<body>
	<p class="box"></p>
</body>
</html>

先来说一下自己一开始的想法吧:background-image: linear-gradient(#000 33.3%,rgb(221, 0, 0) 66.6%,rgb(255, 206, 0) 100%) ;我一开始以为这样写可以出现德国国旗,但是现实却给我大大一巴掌。

出现如下的效果图:

这里写图片描述

然后我开始理解上面我写的代码的意思,从33.3%的位置开始渐变(渐变颜色为黑色),33,3%之前的位置都是纯颜色的,从66.6%的位置开始渐变(渐变颜色为红色)

如果要得到德国国旗,就不需要有渐变的范围,所以说就是刚开始有渐变,就马上扼杀它,简单粗暴的理解。

background-image: linear-gradient(#000 33.3%,rgb(221, 0, 0) 33.3%,rgb(221, 0, 0) 66.6%,rgb(255, 206, 0) 66.6%) ;

通过上面这个一条代码和上面完整的代码,可以实现完美的德国国旗。

这里写图片描述

使用angles

参数释义如下，‘0deg’指向上面，同时正角度顺时针旋转，因此‘90deg’指向右边。

使用deg的规则

这里写图片描述

当角度为45deg的时候,箭头所指的方向是最后一个参数颜色所在的地方,仅仅是方便个人理解而已。

度数为0的意思是从下到上,度数为180的意思是从上往下,由我们的顺时针指向度数

径向渐变radial-gradient

第一个参数: 形状,circle(圆)/ellipse(椭圆,默认),通过百分比/关键位置词可以调整圆心的位置
第二个参数到第n个参数: 从中心到外部的颜色渐变范围,跟线性渐变类似,支持百分比/px
百分比是相对于父元素盒子的大小,数值(px)就是具体的长度at后面是中心点的位置background-image:radial-gradient(ellipse 100% 40% at 0% 100%,red,blue)

例子:background-image: radial-gradient(circle,red,blue)

没有数字范围的时候颜色均分,从圆心(这个位置可以更改的)开始到矩形最远的点均分颜色

例子说明:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>小demo - 径向渐变</title>
	<style>
		body{
			margin: 0;
		}
		.box{
			width: 400px;
			height: 300px;
			background-image:radial-gradient(circle,red 30%,blue 30%);
		}
		.box1{
			width: 400px;
			height: 300px;
			background-image:radial-gradient(ellipse,red 30%,blue 30%);
		}
        /* 当盒子的宽度和高度都一样的时候,circle和ellipse表现都是一样的 */
	</style>
</head>
<body>
	<p class="box"></p>
	<p class="box1"></p>
</body>
</html>

小Tips

设置图片的时候,以逗号作为分隔,可以叠加关系
径向渐变的百分比根据盒子宽高来计算的

参考/练习资料:

深入理解CSS3 gradient斜向线性渐变
10个demo示例学会CSS3 radial-gradient径向渐变

11 - css3渐变

css3渐变

css3渐变

渐变

线性渐变linear-gradient

径向渐变radial-gradient

相关阅读

栏目导航

推荐阅读

热门阅读