在CSS3中对于文字和文本的处理添加了许多新的效果,比如说对于文本添加了阴影效果text-shadow,word-wrap换行的效果,而在之前我们只能通过JS来设置。
1. text-shadow
text-shadow属性给文本设置阴影,与前面提到的box-shadow属性设置方法类似
设置方法为: text-shadow:水平偏移量x,垂直偏移量y,模糊范围(阴影大小),颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字文本</title>
<style type="text/css">
.t1{
color:#0080FF;
text-shadow: 2px 2px 2px #EA0000;
}
.t2{
text-shadow: 0px 0px 3px #EA0000;
}
.t3{
color:white;
text-shadow: 2px 2px 4px #000;
}
</style>
</head>
<body>
<h1 class="t1">Web Design</h1>
<h1 class="t2">Web Design</h1>
<h1 class="t3">Web Design</h1>
</body>
</html>
2.word-wrap
word-wrap是指的长单词长文本的一个折叠效果,允许长单词,URL地址强制进行换行操作
取值:word-wrap:normal/break-word
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字文本</title>
<style type="text/css">
.wdrp1{
width:8em;
color:#0080FF;
border: 1px solid #333;
word-wrap: normal;
}
.wdrp2{
color:#0080FF;
width:8em;
border: 1px solid #333;
word-wrap: break-word;
}
</style>
</head>
<body>
<p class="wdrp1">serdtfyuhijoksedrtfyguhijokpdrftgyhuijokptfgyuhi</p>
<p class="wdrp2">serdtfyuhijoksedrtfyguhijokpdrftgyhuijokptfgyuhi</p>
</body>
</html>
3. @font-face
@font-face规则,规定一种在网页上可以特殊显示的字体,我们把页面上用到的特殊字体Web字体放在服务器上(站点文件夹fonts中),在需要时下载使用。
@font-face规则
如果你已经持有一种格式的字体,想要得到其他格式的字体,那么登录网站进行简单的格式转化即可:Webfont Generator
字体添加方法:
在站点文件夹里创建fonts字体文件夹,把四种字体文件加入文件夹
字体使用方法:
<style>
@font-face{
font-family: fontname;
src:url("文件1的相对路径"),
url("文件2的相对路径"),
url("文件3的相对路径"),
url("文件4的相对路径");
}
p{
font-family: fontname;
}
</style>