简谈CSS3中的基本效果

搞点CSS3。

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-sizebackground-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>
打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  • © 2018-2020 Shawn Zhou
  • Powered by Hexo Theme Ayer
  • PV: UV:

感谢打赏~

支付宝
微信