CSS 闲着无聊读一读,不知不觉学会CSS(六)完

CSS 六

1.z-index

  1. z-index表示谁压盖着谁,数值大的会压盖住数值小的。
  2. 只有定位的元素才有z-index 值,只有设置了固定定位、相对定位、绝对定位的元素它们才会拥有:z-index。
  3. z-index的值时没有单位的,值是一个正整数,默认的z-index的值为0。
  4. 如果多个定位元素没有设置z-index属性或者z-index值设置一样,那么写在HTML后面的定位元素就会压盖住前面的定位元素。

一般像导航栏的z-index值最大。

2.CSS3与CSS2之间的区别

CSS3 = CSS2 + 新语法 + 新的属性
就是对CSS2的扩充、删减、优化。
从这里开始往下都是CSS3的内容和新特性。

3.结构伪类

CSS 闲着无聊读一读,不知不觉学会CSS(六)完

4.border-collapse

这个属性主要是用于来合并表格的边框线,其值为:collapse。
格式:

border-collapse:collapse;

这个属性和表格(table)元素经常使用。

5.伪元素

CSS 闲着无聊读一读,不知不觉学会CSS(六)完
例如定义一个类:

.box::before{
	content:"所要添加的内容,盒子内部最前面";
}
after一样,一样的格式。

6.文本阴影

格式:

text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色

CSS 闲着无聊读一读,不知不觉学会CSS(六)完
水平阴影和垂直阴影必须的写。
例如:

<!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>

此外阴影的数值可以是负值。
CSS 闲着无聊读一读,不知不觉学会CSS(六)完
注意:

  • 文字阴影可以有多组值,多组之间用逗号隔开就可以。
  • 水平阴影正值阴影在右边,负值在左边。
  • 垂直阴影正值在下边,负值在上边。
  • 模糊强度,值越大越模糊。

7.盒子阴影

格式:

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影

水平阴影和垂直阴影必须的写,其余可以忽略不写,和文本阴影一样。
CSS 闲着无聊读一读,不知不觉学会CSS(六)完
和文本阴影差不多,这里不举例子了。

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;
那么这个正方形图形就变成了圆形,这面解释一下怎么才能变成圆形。

CSS 闲着无聊读一读,不知不觉学会CSS(六)完
椭圆如何设置:
CSS 闲着无聊读一读,不知不觉学会CSS(六)完
半圆如何设置:CSS 闲着无聊读一读,不知不觉学会CSS(六)完
同样左半圆,右半圆,下半圆,也都是通过修改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>

结果如下:

CSS 闲着无聊读一读,不知不觉学会CSS(六)完

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完

上一篇:如何使用css样式将正方形图片显示为圆形图片布局


下一篇:Canvas 如何画一个四分之一圆