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"& ...
随机推荐
- Beta阶段冲刺前准备
第 1 篇 Scrum 冲刺博客 1.新成员 暂无新成员,等一个有缘人 团队成员: 刘阳航(captain) 陈文俊 林庭亦 郑子熙 2.讨论是否需要更换团队的PM 经过团队讨论,我们决定不更换团队P ...
- utf-8编码的中文看成2个字符，其他数字字符看成一个字符
方法一:使用正则表达式,代码如下: function getByteLen(val) { var len = 0; for (var i = 0; i &l ...
- [转帖]UsingDiskspdforSQLServer --- 改天做下练习 官方文档.
Using DiskSpd in SQL Server environments Writer: Robert Beene Contributors: Jose Barreto, Ramu Konid ...
- Oracle与SQLSERVER 批处理执行 DDL 语句
1. 公司里面的 很多同名的数据库 的一个表都错误的多了一个列 要是每个都用数据库连接工具打开 感觉太废时间了. 比如写个sql命令来执行. 具体方法: Oracle 使用 sqlplus sqlpl ...
- Idea（二） 解决IDEA卡顿问题及相关基本配置
一.IDEA太卡顿,设置使用IDEA的内存 在IDEA的安装目录下的bin目录下: 打开设置: 将idea.exe.vmoptions文件内由-server-Xms128m-Xmx512m-XX:Ma ...
- 用JavaScript添加选择按钮的背景颜色和juqery添加选择按钮的背景色
在项目开发中经常遇到要选择的按钮,选择完之后被选择的按钮的背景色会发生变化,表示被选择 样式图如下: 每点击一个数字,相应的背景色变为蓝色,其他的依旧是白色,先用JavaScript实现 html代码 ...
- Spring(1):Spring简介
一句话概括: Spring是一种轻量级控制反转IoC和面向切面AOP的容器框架 初衷: 使用接口编程而不是类 为javabean提供一个更好的应用配置框架 javabean是一种规范而不是技术.是指符 ...
- linux eclipse add desktop shortcut with root permission
gedit ~/.local/share/applications/opt_eclipse.desktop sudo apt-get install gksu [Desktop Entry] Type ...
- TreeMap源码剖析
原文 http://blog.csdn.net/chdjj/article/details/38782221 主题 源码分析红黑树 注:以下源码基于jdk1.7.0_11 之前介绍了一系列Map集合 ...
- MT【162】渐近估计
(2017北大优特测试第八题) 数列 \(\{a_n\}\) 满足 \(a_1=1\),\(a_{n+1}=a_n+\dfrac{1}{a_n}\),若 \(a_{2017}\in (k,k+1)\) ...