文本效果
text-shadow:
字体阴影
.text{ text-shadow:5 px 5px 5px #FF0000}
指定:水平阴影、垂直阴影、模糊的距离，以及阴影的颜色
box-shadow:
背景阴影
text-overflow:
文字溢出
.text{text-overflow:clip|ellipsis}
剪切|…替代
word-wrap:
如果某个单词太长，不适合在一个区域内，它扩展到外面：css3中，自动切换属性允许强制文本换行-即使这意味着分裂它中间的一个字。
.text{word-wrap:break-word;}
word-break:
规定非中日韩文本的换行规则
css3单词拆分换行属性指定换行规则：
.text{word-break:keep-all|break-all;}
新文本属性
|
属性 |
描述 |
|
hanqing-punctuation |
规定标点字符是否位于线框之外 |
|
punctuation-trim |
规定是否对标点字符进行修剪 |
|
text-align-last |
设置如何对齐最后一行或紧挨着强制换行符之前的行 |
|
Text-emphasis |
向元素的文本应用重点标记以及重点标记的前背景色 |
|
Text-justify |
规定当text-align设置为“justify”时所使用的对齐方法 |
|
Text-outline |
规定文本的轮廓 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本效果</title>
<style>
h1
{
text-shadow: 10px 10px 5px #888;
}
div.test
{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
}
</style>
</head>
<body>
<h1>文字阴影效果</h1>
<p>以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。</p>
<p>div 使用 "text-overflow:ellipsis":</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<p>div 使用 "text-overflow:clip":</p>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
<p>div 使用自定义字符串 "text-overflow: >>"(只在 Firefox 浏览器下有效):</p>
<div class="test" style="text-overflow:‘>>‘;">This is some long text that will not fit in the box</div>
<p><b>注意:</b> Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow属性.</p>
</body>
</html>
字体
css3之前的版本，网页设计师不得不使用用户计算机已经安装的字体。
使用css3，网页设计师可以使用他/她喜欢的任何字体
当你发现您要使用的字体文件时，只需要简单的将字体文件包含在网站中，它会自动下载给需要的用户。您所选择的新的css3版本有关于@font-face规则描述。
您自己的字体是在[email protected]规则中定义的。
<style>
@font-face
{
font-family: myFirstFont;
src: url(‘myfont/fontawesome-webfont.ttf‘)
,url(‘myfont/fontawesome-webfont.woff‘); /* IE9 */
}
div
{
font-family:myFirstFont;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体</title>
<style>
@font-face
{
font-family: myFirstFont;
src: url(‘myfont/fontawesome-webfont.ttf‘)
,url(‘myfont/fontawesome-webfont.woff‘); /* IE9 */
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<p style="font-family:‘Microsoft YaHei‘"> 微软雅黑 Microsoft YaHei Internet Explorer 9 只支持 .eot 格式的字体.</p>
<p style="font-family:‘Times New Roman‘"> Internet Explorer 9 只支持 .eot 格式的字体.</p>
<p style="font-family:‘SimSun‘"> 宋体 Internet Explorer 9 只支持 .eot 格式的字体.</p>
<p style="font-family:‘SimHei‘"> 黑体 Internet Explorer 9 只支持 .eot 格式的字体.</p>
<p style="font-family:‘ Microsoft JhengHei‘"> 微软正黑体 Internet Explorer 9 只支持 .eot 格式的字体.</p>
<p style="font-family:‘ NSimSun‘"> 新宋体 Internet Explorer 9 只支持 .eot 格式的字体.</p>
<p style="font-family:‘PMingLiU‘"> 新细明体 Internet Explorer 9 只支持 .eot 格式的字体.</p>
<p style="font-family:‘DFKai-SB‘"> 标楷体 Internet Explorer 9 只支持 .eot 格式的字体.</p>
<p style="font-family:‘FangSong‘"> 仿宋 Internet Explorer 9 只支持 .eot 格式的字体.</p>
<p style="font-family:‘KaiTi‘"> 楷体 Internet Explorer 9 只支持 .eot 格式的字体.</p>
<p style="font-family:‘_GB2312 FangSong_GB2312‘"> 仿宋_ Internet Explorer 9 只支持 .eot 格式的字体.</p>
<p style="font-family:‘_GB2312 KaiTi_GB2312‘"> 楷体_ Internet Explorer 9 只支持 .eot 格式的字体.</p>
<p style="font-family:myFirstFont;">自定义字体</p>
<div>
Internet Explorer 9 只支持 .eot 格式的字体.
</div>
</body>
</html>
时间： 2024-12-12 10:19:22