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"& ...

随机推荐

week3c：个人博客作业
程序测试: 一个基本的测试. 在Visual Studio 2013 中使用C++单元测试操作如下: 这是我学到的过程. 有复杂程序的测试.以后有时间再弄.
InputStreamReader & OutputStreamWriter
InputStreamReader 是字节流通向字符流的桥梁:它使用指定的 charset 读取字节并将其解码为字符. OutputStreamWriter 是字符流通向字节流的桥梁:可使用指定的 c ...
发布.NET Core到IIS
目录: 支持操作系统 IIS配置安装.NET Core Windows Server Hosting 部署应用程序在IIS配置网站创建一个数据保护注册表项常见的错误额外的资源支持操作系统 ...
Scrum 项目7.0——第一个Sprint的演示和回顾
MY—HR 成员: 角色分配学号博客园团队贡献分丘惠敏 PM项目经理 201406114203 http://www.cnblogs.com/qiuhuimin/ 21 郭明茵用户 2014 ...
windows多线程（九） PV原语分析同步问题
一.PV原语介绍 PV原语通过操作信号量来处理进程间的同步与互斥的问题.其核心就是一段不可分割不可中断的程序. 信号量的概念1965年由著名的荷兰计算机科学家Dijkstra提出,其基本思路是用一种新 ...
[转帖]CPU 的缓存
缓存这个词想必大家都听过,其实缓存的意义很广泛:电脑整机最大的缓存可以体现为内存条.显卡上的显存就是显卡芯片所需要用到的缓存.硬盘上也有相对应的缓存.CPU有着最快的缓存(L1.L2.L3缓存等),缓 ...
[转帖] .net 2.1 是 LTS长期支持版本.
[翻译] .NET Core 2.1 发布原文: Announcing .NET Core 2.1 我们很高兴可以发布 .NET Core 2.1.这次更新包括对性能的改进,对运行时和工具的改进 ...
nodejs 新特性
一般时间没看nodejs了,又出了一些新特性了. 异步钩子 async_hooks 先看相关的文章吧 https://zhuanlan.zhihu.com/p/27394440 性能 ...
php三种方法从控制结构或脚本中跳出
PHP中,如果希望停止一段代码,根据需要达到的效果不同,可以有三种方法实现: 1. break: 如果在循环中使用了break语句,脚本就会从循环体后面的第一条语句开始执行: 2. continue: ...
Python实现奖金计算两种方法的比较
应发奖金计算简述:企业发放的奖金根据利润提成.利润(profit)低于或等于10万元时,奖金可提10%: 利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可提成 ...

CSS3实战-文字篇

text-shadow的大作用

文字溢出处理：text-overflow

CSS3实战-文字篇的更多相关文章

随机推荐

热门专题