CSS 六
1.z-index
- z-index表示谁压盖着谁，数值大的会压盖住数值小的。
- 只有定位的元素才有z-index 值，只有设置了固定定位、相对定位、绝对定位的元素它们才会拥有：z-index。
- z-index的值时没有单位的，值是一个正整数，默认的z-index的值为0。
- 如果多个定位元素没有设置z-index属性或者z-index值设置一样，那么写在HTML后面的定位元素就会压盖住前面的定位元素。
一般像导航栏的z-index值最大。
2.CSS3与CSS2之间的区别
CSS3 = CSS2 + 新语法 + 新的属性
就是对CSS2的扩充、删减、优化。
从这里开始往下都是CSS3的内容和新特性。
3.结构伪类
4.border-collapse
这个属性主要是用于来合并表格的边框线，其值为：collapse。
格式：
border-collapse:collapse;
这个属性和表格(table)元素经常使用。
5.伪元素
例如定义一个类：
.box::before{
content:"所要添加的内容，盒子内部最前面";
}
after一样，一样的格式。
6.文本阴影
格式：
text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色
水平阴影和垂直阴影必须的写。
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.box{
font-size: 40px;
font-family: "楷体"；
color:#32CD32;
text-shadow:3px 3px 3px #CD5C5C;
}
</style>
</head>
<body>
<div class="box">
文本阴影
</div>
</body>
</html>
此外阴影的数值可以是负值。
注意：
- 文字阴影可以有多组值，多组之间用逗号隔开就可以。
- 水平阴影正值阴影在右边，负值在左边。
- 垂直阴影正值在下边，负值在上边。
- 模糊强度，值越大越模糊。
7.盒子阴影
格式：
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影
水平阴影和垂直阴影必须的写，其余可以忽略不写，和文本阴影一样。
和文本阴影差不多，这里不举例子了。
8.圆角矩形
格式：
border-radius:左上 右上 右下 左下
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid #f00;
border-radius: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
注意：
如果说border-radius的四个值都是一样的话就可以只需要写一个参数就可以了。
如果将上面的border-radius修改成一下：
border-radius:50px;
那么这个正方形图形就变成了圆形，这面解释一下怎么才能变成圆形。
椭圆如何设置：
半圆如何设置：
同样左半圆，右半圆，下半圆，也都是通过修改px值来完成的。
注意：
img也可以使用border-radius这个属性。
例如：
制作一个圆形图像：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
img{
width: 200px;
height: 200px;
border-radius: 50%;
}
</style>
</head>
<body>
<img src="./images/壁纸.jpg">
</body>
</html>
结果如下：
9.透明度
只要是颜色，都可以用透明度。
格式：
rgba(红色，绿色，蓝色，透明度)
a: 表示透明度的意思，透明度取值：0~1之间，0表示完全透明，1表示不透明。
说明：
- 背景颜色透明：background-color:rgba(255,255,255,0.3);
- 文本颜色透明：color:rgba(255,255,255,0.3);
- 边框颜色透明：border:1px solid rgba(255,255,255,0.5);