css3渐变
- 鼠标样式
- 透明度的使用以及兼容性写法(针对IE的大傻逼)
- 线性渐变
- 径向渐变
###鼠标样式(cursor)
规定当鼠标进入元素呢内容区域显示的光标类型
只需要修改cursor的对应的值
####cursor指针样式
cursor: default;/* 箭头 */
cursor: auto;/* 默认,根据浏览器设置的光标 */
cursor: move:/* 可拖拽的状态/可移动 */
cursor: pointer;/* 小手 */
cursor: crosshair;/* 十字架 */
/* 需要在写在css样式里面,针对小白提醒一下 */
####自定义指针样式
通过引入自己设定的自指针样式
依次检索加载,前面的不行,后面的备胎顶上去,需要用逗号分隔。
div{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>
<div class="box"></div>
</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>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>
小Tips
- 设置图片的时候,以逗号作为分隔,可以叠加关系
- 径向渐变的百分比根据盒子宽高来计算的
参考/练习资料: