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"& ...
随机推荐
- 信安实践——CSRF攻击与防御
1.实验原理 CSRF(Cross-Site Request Forgery,跨站点伪造请求)是一种网络攻击方式,该攻击可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击站点,从而在未授权的 ...
- 标头 header()函数的用法
头 (header) 是服务器以 HTTP 协议传 HTML 资料到浏览器前所送出的字串,在标头与 HTML 文件之间尚需空一行分隔. 范例一: 本例使浏览器重定向到 PHP 的官方网站. <? ...
- 关于react 官方脚手架使用出现的问题
首先按照官网说明,一路的安装下来,很顺利,然后开始运行吧,提示个错误,缺少index.js 文件 原来是默认给出的文件是App.js 如何更改呢 找到react-script模块文件夹config下 ...
- mysql 函数示例（转）
MySQL函数大全及用法示例 1.字符串函数ascii(str) 返回字符串str的第一个字符的ascii值(str是空串时返回0) mysql> select ascii('2'); ...
- [转帖]中国SaaS死或生之一：“网红”CRM的大起大落
中国SaaS死或生之一:“网红”CRM的大起大落 http://www.cniteyes.com/archives/33709 文章摘要:从“大众情人”到被人遗弃,如何从CRM身上审视中国Sa ...
- JS 日期 自动补齐 “2017-11-22 14:43”
var myDate = new Date(); var myN = myDate.getFullYear(); var myY = myDate.getMonth(); var myR = myDa ...
- 在输入密码框中眼睛睁开可以看见数字，眼睛闭上看不见数字怎么用JS实现
无论做那个项目,登录注册页面总是避免不了的,那怎么用js来控制密码的显示和隐藏呢?先看一下效果图: HTML代码如下: <div> <label for=" ...
- python对excel操作
学习一下:原文链接:http://www.cnblogs.com/lhj588/archive/2012/01/06/2314181.html 一.安装xlrd模块 到python官网下载http:/ ...
- git 复位出现If no other git process is currently running, this probably means a git process crashed in this repo
复位到A节点的时候点了取消(终止),又去复位另外个节点,结果每次不管复位哪个都会报这个错误 fatal: Unable to create 'XXXXXXXXX' : File exists. If ...
- BZOJ 3881: [Coci2015]Divljak
3881: [Coci2015]Divljak Time Limit: 20 Sec Memory Limit: 768 MBSubmit: 553 Solved: 176[Submit][Sta ...