zoukankan html css js c++ java

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;结合使用

查看全文

相关阅读:
js 比较日期的大小
 日历（从今天起后面的14天）
数字转大写
 object对象进行深拷贝
 浏览器渲染机制
 t-5.倒计时(秒杀效果)--本地--服务器（待续）
s-1.rem自适应
 t-3.跑马灯
 t-2.手机端简单轮播（无滑动效果）
16.弹性布局

原文地址：https://www.cnblogs.com/zcynine/p/5376645.html