CSS3实战-文字篇
text-shadow的大作用
多颜色阴影效果，用逗号分隔text-shaodow即可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-shadow</title>
<style type="text/css">
p {
text-align: center;
margin:0;
font-family: helvetica, arial, sans-serif;
color: #fff;
font-size: 80px;
font-weight: bold;
text-shadow: 0.2em 0.5em 0.1em #600,
-0.3em 0.1em 0.1em #060,
0.4em -0.3em 0.1em #006;
}
</style>
</head> <body>
<p>Text Shadow</p>
</body>
</html>
烈焰文字效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-shadow</title>
<style type="text/css">
p {
text-align: center;
padding:24px;
margin:0;
font-family: helvetica, arial, sans-serif;
color: #000;
background:#000;
font-size: 80px;
font-weight: bold;
text-shadow: 0 0 4px white,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
}
</style>
</head> <body>
<p>Text Shadow</p>
</body>
</html>
立体雕塑风格文字
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-shadow</title>
<style type="text/css">
p {
text-align: center;
padding:24px;
margin:0;
font-family: helvetica, arial, sans-serif;
font-size: 80px;
font-weight: bold;
color: #D1D1D1;
background:#CCC;
text-shadow: -1px -1px white,
1px 1px #333;
}
</style>
</head> <body>
<p>Text Shadow</p>
</body>
</html>
也可以是凹的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-shadow</title>
<style type="text/css">
p {
text-align: center;
padding:24px;
margin:0;
font-family: helvetica, arial, sans-serif;
font-size: 80px;
font-weight: bold;
color: #D1D1D1;
background:#CCC;
text-shadow: 1px 1px white,
-1px -1px #444;
}
</style>
</head> <body>
<p>Text Shadow</p>
</body>
</html>
描边效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-shadow</title>
<style type="text/css">
p {
text-align: center;
padding:24px;
margin:0;
font-family: helvetica, arial, sans-serif;
font-size: 80px;
font-weight: bold;
color: #D1D1D1;
background:#CCC;
text-shadow: -1px 0 black,
0 1px black,
1px 0 black,
0 -1px black;
}
</style>
</head> <body>
<p>Text Shadow</p>
</body>
</html>
发光效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-shadow</title>
<style type="text/css">
p {
text-align: center;
padding:24px;
margin:0;
font-family: helvetica, arial, sans-serif;
font-size: 80px;
font-weight: bold;
text-shadow: 0 0 0.2em #F87,
0 0 0.2em #F87;
}
</style>
</head> <body>
<p>Text Shadow</p>
</body>
</html>
文字溢出处理：text-overflow
text-overflow这个属性要和white-space属性一块儿用，white-space是用来强制文字在一行显示的属性。
事实上，这个属性还有一点兼容性问题，在Mozilla浏览器和FF上面要做一些特殊处理。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-overflow</title>
<style type="text/css">
dl {
width:240px;
border:solid 1px #ccc;
}
dt {
padding:8px 8px;
background:#7FECAD url(images/green.gif) repeat-x;
font-size:13px;
text-align:left;
font-weight:bold;
color:#71790C;
margin-bottom:12px;
border-bottom:solid 1px #efefef;
}
dd {
font-size:0.78em;
height:1.5em;
width:220px;
padding:2px 2px 2px 18px;
background:url(images/icon.gif) no-repeat left 25%;
margin:2px 0;
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis; /* Opera */
text-overflow: ellipsis; /* IE, Safari (WebKit) */
-moz-binding: url('ellipsis.xml#ellipsis'); /* Firefox */
}
</style>
</head> <body>
<dl>
<dt>体育新闻</dt>
<dd>姚明或将出席球迷签名会 火箭重返故地拉拢球迷10:58</dd>
<dd>申花恩朗遭足协追加停赛4场01:48 </dd>
<dd>体操世锦赛中国名单公布 陈一冰领军邹凯无缘出征10:52</dd>
<dd>罗雪娟恋情首度曝光 富二代辞职赴美陪读10:36 </dd>
<dd>广州亚运竞赛全接触 筹备工作正在按部就班进行09:53 </dd>
<dd>曝马拉多纳密会梅西寻支持 拼死重掌阿根廷教鞭10:25</dd>
<dd>李承鹏：我当足协主席也会贪污 有些脑残不懂09-28 15:17 </dd>
</dl>
</body>
</html>
ellipse.xml
<?xml version="1.0" encoding="utf-8"?>
<bindings
xmlns="http://www.mozilla.org/xbl"
xmlns:xbl="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
<binding id="ellipsis">
<content>
<xul:window>
<xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
</xul:window>
</content>
</binding>
</bindings>
换行处理：word-break和word-wrap
在IE浏览器下，使用word-wrap:break-word;没有任何问题
在FF下，中英文不会出现问题，但是长串英文会出现问题。
一般将word-wrap:break-word;和word-brak:break-all;结合使用
CSS3实战-文字篇的更多相关文章
- 《css3实战》读书笔记 第一章 基于CSS需求而编写的HTML.
笔记说明 <CSS3实战手册第3版(影印版)>可以消除Web设计工作的痛苦,并且带给你:HTML--重新入门.如果你是HTML新手,你会学到如何以CSS友好的方式进行基本页面构造.若你是H ...
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效
原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...
- 160427、CSS3实战笔记--多列布局
通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.—北京机械工业出版社2011.5 多列布局适合纯文字版式设计,如报纸内和杂志类网页布局,不适合做网页结构布 ...
- IE下实现类似CSS3 text-shadow文字阴影的几种方法
IE下实现类似CSS3 text-shadow文字阴影的几种方法 一.开始的擦边话 为了测试IE9浏览器,下午晃晃荡荡把系统换成window7的了.果然,正如网上所传言的一样,IE9浏览器确实不支持C ...
- iOS开发——实战OC篇&环境搭建之Xib（玩转UINavigationController与UITabBarController）
iOS开发——实战OC篇&环境搭建之Xib(玩转UINavigationController与UITabBarController) 前面我们介绍了StoryBoard这个新技术,和纯技术 ...
- iOS开发——实战OC篇&环境搭建之纯代码（玩转UINavigationController与UITabBarController）
iOS开发——实战OC篇&环境搭建之纯代码(玩转UINavigationController与UITabBarController) 这里我们就直接上实例: 一:新建一个项目singleV ...
- 基于css3的文字3D翻转特效
一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="compo ...
- CSS3实战手册(第3版)(影印版)
<CSS3实战手册(第3版)(影印版)> 基本信息 原书名:CSS3: The Missing Manual, 3E 作者: David Sawyer McFarland 出版社:东南大学 ...
- CSS3实战开发 表单发光特效实战开发
首先,我们先准备好html代码: <!doctype html> <html> <head> <meta charset="utf-8"& ...
随机推荐
- unix网络编程——TCP套接字编程
TCP客户端和服务端所需的基本套接字.服务器先启动,之后的某个时刻客户端启动并试图连接到服务器.之后客户端向服务器发送请求,服务器处理请求,并给客户端一个响应.该过程一直持续下去,直到客户端关闭,给服 ...
- FindBugs插件的使用手册
安装FindBugs直接查找eclipse的商店,查找spot Bugs 插件,安装即可 完成安装之后重启eclipse,右击项目文件或目录,会发现多了Findbugs的菜单: 使用Findbugs ...
- Delphi中使用OLE方法操作Excel
首先创建 Excel 对象,使用ComObj: var ExcelApp: Variant; ExcelApp := CreateOleObject( ′Excel.Application′ ); 注 ...
- pygame学习笔记（5）——精灵
转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 据说在任天堂FC时代,精灵的作用相当巨大,可是那时候只知道怎么玩超级玛丽.魂斗罗,却对精灵一点也不知.pygame ...
- DataTable List 相互转换
This uses the FastMember's meta-programming API for maximum performance. If you want to restrict it ...
- 2013南京网赛1003 hdu 4750 Count The Pairs
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4750 题意:给出一个无向图,f(a,b)表示从点a到点b的所有路径中的每条路径的最长边中的最小值,给出 ...
- 【大数据】MapTask工作机制
1.MapTask工作机制 整个map阶段流程大体如上图所示.简单概述:input File通过getSplits被逻辑切分为多个split文件,通通过RecordReader(默认使用lineRec ...
- Java将其他数据类型转换成JSON字符串格式
Student.java package com.demo.servlet; import java.util.List; import java.util.Map; public class Stu ...
- BZOJ3309 DZY Loves Math（莫比乌斯反演+线性筛）
一通正常的莫比乌斯反演后,我们只需要求出g(n)=Σf(d)*μ(n/d)的前缀和就好了. 考虑怎么求g(n).当然是打表啊.设n=∏piai,n/d=∏pibi .显然若存在bi>1则这个d没 ...
- NOIP赛前集训营-提高组（第一场）#A 中位数
题目描述 小N得到了一个非常神奇的序列A.这个序列长度为N,下标从1开始.A的一个子区间对应一个序列,可以由数对[l,r]表示,代表A[l], A[l + 1], ..., A[r]这段数.对于一 ...