CSS 闲着无聊读一读,不知不觉学会CSS(六)完
作者:互联网
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);
CSS完
标签:index,读一读,阴影,闲着,radius,border,CSS,255 来源: https://blog.csdn.net/IT_Holmes/article/details/116257537