一，线性渐变linear-gradient
- 直接看代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
margin: 200px 0 0 200px;
width: 200px;
height: 200px;
/*background-color: orange;*/
/*基本用法*/
/*rgba(144, 238, 144, .5)调色板 前三个值（红绿蓝）的范围为0到255之间的整数或者0%到100%之间的数
第四个值为透明度*/
/*background-image: linear-gradient(red, yellow, blue, green);*/
background-image: linear-gradient(rgba(144, 238, 144, .5), yellow, blue, green);
/*控制颜色渐变的方向
to right -- 从左向右
to top -- 从下到上
to left -- 从右到左
to bottom --- 从上到下（默认值）
*/
/*background-image: linear-gradient(to right, red, yellow, blue, green);
background-image: linear-gradient(to top, red, yellow, blue, green);
background-image: linear-gradient(to left, red, yellow, blue, green);
background-image: linear-gradient(to bottom, red, yellow, blue, green);*/
/*0deg = to top -- 从下到上*/
/*background-image: linear-gradient(0deg, red, yellow, blue, green);*/
/*基于0度顺时针旋转45deg*/
/*background-image: linear-gradient(45deg, red, yellow, blue, green);*/
/*基于0度逆时针旋转45deg*/
/*background-image: linear-gradient(-45deg, red, yellow, blue, green);*/
/*设置过渡颜色的起始位置*/
/*从过渡起始位置50px开始让红色和黄色之间产生颜色渐变效果*/
/*background-image: linear-gradient(to right, red 50px, yellow, blue, green);
background-image: linear-gradient(to right, red 50px, yellow 50px, blue, green);
background-image: linear-gradient(to right, red 50px, yellow 50px, yellow 100px, blue, green);*/
}
.box:hover {
background: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
</script>
</body>
</html>
k歌效果案例
- 解释
这案例利用了css3中的效果，思路为背景为渐变颜色将上面的字体设置为透明，
将两种颜色设置占空比改变实现k歌字体的效果1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>k歌效果</title>
</head>
<style>
.a {
width: 1400px;
height: 30px;
background: wheat;
/*设置一个渐变的背景*/
background-image: linear-gradient(to right, blue, wheat);
/*我们将渐变的背景改变下，让他颜色分界。*/
background-image: linear-gradient(to right, blue 30%, wheat 0%);
/*将背景颜色在字中显示出来,*/
-webkit-background-clip: text;
/*将字体设置为透明*/
-webkit-text-fill-color: transparent;
font-size: 150%;
}
</style>
<body>
<div class="a" >
你想回家吗？不想，加班使我快乐！你想回家吗？不想，加班使我快乐！你想回家吗？不想，加班使我快乐！
你想回家吗？不想，加班使我快乐！
</div>
<script>
window.onload= function(){
// 获取a原素
var aclass = document.querySelector(".a");
//定义背景长度
var progress = 0;
setInterval(change,100);
function change(){
progress ++ ;
if(progress==100)
{ progress=0;}
aclass.style.backgroundImage
="linear-gradient(to right, blue " + progress + "%, wheat 0%)";
}
}</script>
</body>
</html>
如何图片重叠
- 首先将父容器的position 设置为relative;相对布局
- 将子容器设置为position: absolute;绝对布局
- 子容器通过z-index：3；根据大小可以大的在上面
- opacity: 0.5;设置透明度
css3的图片阴影box-shadow
- 参数介绍
box-shadow: 1px 2px 3px 4px #000;
解释：1px表示右边有阴影宽度为1px,2px表示下方有阴影宽为2px，
3px表示阴影的圆角为3px，4px表示全周阴影为4px,#000表示阴影的颜色
注意
当第四参数有时，前面两个会占用第四个值从而达到左上，但值过量阴影偏离。1
box-shadow: -4px 0px 3px 4px #000;
代码解释：左边阴影为4px，右边为0px,其他为4px,阴影圆角为3px.
css内容文字居中
内容居中
- 居中根据浏览器来居中（居中本元素宽度中心）
1
2
3
4
5width: 1200px;
height: 800px;
background-color: #004c88;
margin-left: auto;
margin-right: auto;
解释:居中本块元素在浏览器的中间，缺点不能使用外边距。
第二种方法1
2
3
4
5
6position: relative;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
解释：同样可以本内容居中，占浏览器的宽中心（推荐）
- 本元素居中（位于父元素的正中心）
1
2
3
4
5
6
7
8width: 800px;
height: 400px;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
解释：这与前面不同这是位于父元素或浏览器的正中心
字内容居中
- 位于一行中的中心
1
text-align: center;
解释：将字放在块元素的宽中间
- 位于正中心
1
2
3height: 200px;
text-align: center;
line-height: 200px;
解释：将行高为容器的高度。
css常见的样式
| css | 解释 |
|---|---|
| clip:rect(10px 250px 100px 0px) | 第一个参数从上向下裁剪10px,第二三个是固定图片的大小，第四是向右裁剪 |
