css3学习笔记

前端开发那些事
字数统计: 2.6k   |   阅读时长≈ 10 分钟

这里记载了关于CSS3相关的学习笔记，该部分内容是曾在2020年发布的。

当前博客显示的发布时间非真实时间，而是这些内容在当时发布时的最后发布时间。

CSS3 边框

通过CSS3可以创建圆角边框，向矩形添加阴影，还可以使用图片来绘制边框，不需要借助PS就能完成这些操作。

可能用到的有border-radius（这个在之前的开发中经常用到）,box-shadow，还有border-image。

IE9及以上版本支持前两者，火狐，Chrome，Safari支持全部的属性。

以moz-，ms-，webkit-开头的属性是为了兼容更多浏览器的，效果和不加此前缀的一样。

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
51
52
53
54
<!doctype html>  
<html>  
<head>  
	<meta charset="utf-8">  
	<title>testdw</title>  
	<style>  
		.box1 {  
			text-align: center;  
			line-height: 50px;  
			width: 200px;  
			height: 50px;  
			border: 2px solid #0BDC57;  
			border-radius: 30px;  
		}  
		.box2 {  
			text-align: center;  
			width: 200px;  
			height: 100px;  
			line-height: 100px;  
			border: 2px solid pink;  
			background: pink;  
			margin-top: 20px;  
			box-shadow: 10px 10px 5px #888;  
			/*	参数一：左右偏移量	*/  
			/*	参数二：上下偏移量	*/  
			/*	参数三：模糊半径	*/  
			/*	参数四：阴影颜色	*/  
		}  
		.box3 {  
			text-align: center;  
			margin-top: 20px;  
			width: 200px;  
			height: 50px;  
			line-height: 50px;		  
			border: 15px solid transparent;  
			border-image: url(https://www.runoob.com/images/border.png) 30 30 round;  
			/*	设置图片边框必须先设置边框属性，把边框的宽度设出来，颜色设为透明	*/  
			  
		}  
	</style>  
</head>  
<body>  
	<div class="box1">  
		这是一个圆角效果  
	</div>  
	<div class="box2">  
		这是一个阴影效果  
	</div>  
	<div class="box3">  
		这是一个图片边框效果  
	</div>  
  
</body>  
</html>

吐槽：Dreamweaver不太好使，可能是我不会用，也可能是它真的不好使

CSS3 背景

CSS3包含多个新的背景属性，提供对背景更强大的控制。

background-size与background-origin这两个属性对IE9以上支持，火狐，Chrome，Safari，Opera支持。

前者用于控制背景图大小，常用。

后者用于相对内容框来定位背景图像，这个属性规定background-position属性相对于什么位置来定位。

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
<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="utf-8">  
		<title>CSS3背景</title>  
		<style type="text/css">  
			div {  
				border: 1px solid black;  
				padding: 35px;  
				background-image: url(img/11.png);  
				background-repeat: no-repeat;  
				background-position: left;  
				background-size: 10% 50%;  
				margin-top: 10px;  
			}  
			.box1 {  
				background-origin: border-box;  
			}  
			.box2 {  
				background-origin: content-box;  
			}  
			.box3 {  
				background-origin: padding-box;  
			}  
		</style>  
	</head>  
	<body>  
		<div class="box1">  
			测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试<br>  
			测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试<br>  
			测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试<br>  
			测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试<br>  
		</div>  
		<div class="box2">  
			测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试<br>  
			测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试<br>  
			测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试<br>  
			测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试<br>  
		</div>  
		<div class="box3">  
			测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试<br>  
			测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试<br>  
			测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试<br>  
			测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试<br>  
		</div>  
	</body>  
</html>

CSS3 添加文本效果

text-shadow为文本添加阴影，参数与边框阴影的相同。

word-wrap确定单词换行方式，当一行单词过长而恰好输出到边框边缘时，过长部分会越过边框进行输出，打破盒模型规范。使用word-wrap: break-word;可以把过长的单词换行显示。

与前面不同，这两个属性在IE10以上才会起作用，其他浏览器则全部支持。

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
<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="utf-8">  
		<title>CSS3背景</title>  
		<style type="text/css">  
			h1 {  
				text-shadow: 10px 10px 5px #333;  
			}  
			.box1 {  
				width: 200px;  
				height: 400px;  
				border: 1px solid #49FF33;  
				word-wrap: break-word;  
			}  
		</style>  
	</head>  
	<body>  
		<h1>测试标题</h1>  
		<div class="box1">  
			qw er ty ui op qw er ty uiwerwfsdfsdghrsthdfgdfssdfhsegdfg op qw er ty ui op qw er ty ui op qw er ty ui op qw er ty ui op qw er ty ui op   
			qw er ty ui op qw er ty ui op qw er ty ui op qw er ty ui op qw er ty ui op qw er ty ui op qw er ty ui op   
			qw er ty ui op qw er ty ui op qw er ty ui op qw er ty ui op qw er ty ui op qw er ty ui op qw er ty ui op   
			qw er ty ui op qw er ty ui op qw er ty ui op qw er ty ui op qw er ty ui op qw er ty ui op qw er ty ui op   
		</div>  
	</body>  
</html>

使用下面的操作可以使用网络字体，在url里面填写对应的字体地址即可。

不过现在网络上的在线字库也有用SDK提供接口的，一般也都会给接入教程。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="utf-8">  
		<title>CSS3字体</title>  
		<style type="text/css">  
			@font-face {  
				font-family: test;  
				src: url("");  
			}  
			div {  
				font-family: test;  
			}  
		</style>  
	</head>  
	<body>  
		<div>  
			test  
		</div>  
	</body>  
</html>

CSS3 2D效果

通过CSS3转换，可以对元素进行移动translate、缩放rotate、转动 scale、拉长skew、拉伸matrix。

IE10+，火狐，Opera支持这些2D效果。

Chrome和Safari需要添加-webkit-

IE9需要添加-ms-

比如-webkit-transform: rotate(30deg)就是让它顺时针旋转30度。

API在菜鸟教程都能查到，我就先略过了。

CSS3 3D效果与过渡

3D效果对浏览器的要求和2D效果一样，属性名还是transform。使用rotateX()和rotateY()控制X和Y方向的变化，参数还是角度。

通过CSS3，可以在不使用Flash或者JS的情况下，当元素从一种样式变换到另一种样式时为元素添加效果。

过渡效果对于IE10以上，火狐，Chrome，Opera是支持的，对于Safari需要加-webkit-。要实现过渡，需要确定希望把效果添加到哪个CSS属性上，并规定时长。

基本格式：transition: 属性名 变化时间;，指定多个时，一个属性名对应一个变化时间算一对，多对之间逗号隔开。

当事件发生（鼠标浮上，鼠标点击等）时，改变对应的属性，就能以动画的形式进行变化，而不是瞬间变化，这里可能需要用到:hover等选择器。

CSS3 动画

使用@keyframes规则创建动画，在里面规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。

IE10以上，火狐，Opera支持这个规则和animation属性，Chrome和Safari需要加-webkit-。

然后用animation调用刚才创建的动画就可以。通过至少规定动画的名称和时长这两个属性，就能将动画绑定到选择器。

使用一些关键字来区分阶段，它是不同于过渡的。过渡效果是简单的从一个变为另一个，而动画可以有不同的阶段，比如各种百分比阶段的时候操作是怎样的。不同的阶段可能会有不同的操作。当然也可以简单的使用from和to实现从一个变为另一个。

理论上讲，这是一个很强大的功能，可以用来做各种炫酷的骚气的网页动画，这部分内容值得深究。

CSS3 多列

对文本进行多列布局，像报纸那样。word里面也有对应类似的功能（分栏）。

（其实这玩意用盒模型也能写的出来，就是麻烦，用多列做会方便一些）

属性有column-count确定分多少列，column-gap确定分隔宽度，column-role设定分栏样式等等

IE10以上和Opera支持多列，火狐需要-moz-，Chrome和Safari需要-webkit-

打赏
  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！
  • Copyrights © 2018-2023 Shawn Zhou
  • 由 Hexo 框架强力驱动 | 主题 - Ayer
  • 访问人数: | 浏览次数:

感谢打赏~

支付宝
微信