CSS3 文本效果

前言

  • CSS3 中包含几个新的文本特征。
属性 描述 CSS 备注 🔗
color 设置文本颜色 1 🔗
direction 设置文本方向 2 🔗
letter-spacing 设置字符间距 1 🔗
line-height 设置行高 1 🔗
text-align 元素中的文本对齐方式 1 🔗
text-decoration 向文本添加修饰 1 🔗
text-indent 缩进元素中文本的首行 1 🔗
text-shadow 设置文本阴影 1 🔗
text-transform 控制元素中的字母 1 🔗
unicode-bidi 设置或返回文本是否被重写 2 🔗
vertical-align 设置元素的垂直对齐 1 🔗
white-space 设置元素中空白的处理方式 1 🔗
word-spacing 设置字间距 1 🔗
hanging-punctuation 规定标点字符是否位于线框之外 3 🔗
punctuation-trim 规定是否对标点字符进行修剪 3 🔗
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行 3 🔗
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色 3 🔗
text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法 3 🔗
text-outline 规定文本的轮廓 3 🔗
text-overflow 规定当文本溢出包含元素时发生的事情 3 🔗
text-shadow 向文本添加阴影 3 🔗
text-wrap 规定文本的换行规则 3 🔗
word-break 规定非中日韩文本的换行规则 3 🔗
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行 3 🔗

1、阴影

  • CSS3 中,text-shadow 属性适用于文本阴影。
属性 描述 CSS 备注 🔗
text-shadow 向文本添加阴影 3 🔗
box-shadow 设置一个或多个下拉阴影的框 3 🔗
  • 属性值
text-shadow 值 描述
h-shadow 必需。水平阴影的位置。允许负值
v-shadow 必需。垂直阴影的位置。允许负值
blur 可选。模糊的距离
color 可选。阴影的颜色
box-shadow 值 描述
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色
inset 可选。从外层的阴影(开始时)改变阴影内侧阴影

1.1 文本阴影

  • 指定了水平阴影,垂直阴影,模糊的距离,以及阴影的颜色。

  • 实例

    1
    2
    3
    4
    5
    <style>
    h1 {
    text-shadow: 5px 5px 5px red;
    }
    </style>
    1
    <h1>Text-shadow effect!</h1>
  • 效果


    Text-shadow effect!


1.2 盒子阴影

  • CSS3 中 box-shadow 属性适用于盒子阴影。

  • 写 box-shadow 的依次顺序为:

    1
    2
    3
    h-shadow   v-shadow   blur   spread   color     insect

    水平阴影 垂直阴影 模糊 阴影尺寸 颜色 外阴影转到内阴影
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
    div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    box-shadow: 10px 10px 5px #888888;
    }
    </style>
    1
    <div></div>
  • 效果



1.3 阴影颜色

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
    div {
    width: 300px;
    height: 100px;
    padding: 15px;
    background-color: yellow;
    box-shadow: 10px 10px grey;
    }
    </style>
    1
    <div>This is a div element with a box-shadow</div>
  • 效果


    This is a div element with a box-shadow

1.4 模糊效果

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
    div {
    width: 300px;
    height: 100px;
    padding: 15px;
    background-color: yellow;
    box-shadow: 10px 10px 5px grey;
    }
    </style>
    1
    <div>This is a div element with a box-shadow</div>
  • 效果


    This is a div element with a box-shadow

1.5 伪元素中添加阴影效果

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <style>
    #boxshadow {
    position: relative;
    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    padding: 10px;
    background: white;
    }
    /* Make the image fit the box */
    #boxshadow img {
    width: 100%;
    border: 1px solid #8a4419;
    border-style: inset;
    }
    #boxshadow::after {
    content: '';
    position: absolute;
    z-index: -1; /* hide shadow behind image */
    -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    width: 70%;
    left: 15%; /* one half of the remaining 30% */
    height: 100px;
    bottom: 0;
    }
    </style>
    1
    2
    3
    <div id="boxshadow">
    <img src="https://demo.qianchia.com/media/image/demo21.png" alt="Norway" width="600" height="400" />
    </div>
  • 效果

1.6 卡片效果

  • box-shadow 属性可以用来创建纸质样式卡片。

1.6.1 文字卡片

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <style>
    div.card {
    width: 250px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    }
    div.header {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    font-size: 40px;
    }
    div.container {
    padding: 10px;
    }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="card">
    <div class="header">
    <h1>1</h1>
    </div>

    <div class="container">
    <p>January 1, 2016</p>
    </div>
    </div>
  • 效果




    1




    January 1, 2016




1.6.2 图片卡片

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
    div.polaroid {
    width: 250px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    }

    div.container {
    padding: 10px;
    }
    </style>
    1
    2
    3
    4
    5
    6
    <div class="polaroid">
    <img src="https://demo.qianchia.com/media/image/demo21.png" alt="Norway" style="width: 100%;" />
    <div class="container">
    <p>Hardanger, Norway</p>
    </div>
    </div>
  • 效果





    Hardanger, Norway




2、溢出

  • CSS3 文本溢出属性指定应向用户如何显示溢出内容。
属性 描述 CSS 备注 🔗
text-overflow 规定当文本溢出包含元素时发生的事情 3 🔗
  • 属性值
描述
clip 修剪文本
ellipsis 显示省略符号来代表被修剪的文本
string 使用给定的字符串来代表被修剪的文本
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
    div.test {
    white-space: nowrap;
    width: 12em;
    overflow: hidden;
    border: 1px solid #000000;
    }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <p>以下 div 容器内的文本无法完全显示,可以看到它被裁剪了。</p>

    <p>div 使用 &quot; `text-overflow: ellipsis;` &quot;:</p>
    <div class="test" style="text-overflow: ellipsis;">This is some long text that will not fit in the box</div>

    <p>div 使用 &quot; `text-overflow: clip;` &quot;:</p>
    <div class="test" style="text-overflow: clip;">This is some long text that will not fit in the box</div>

    <p>div 使用自定义字符串 &quot; `text-overflow: >>;` &quot; (只在 Firefox 浏览器下有效):</p>
    <div class="test" style="text-overflow:'>>';">This is some long text that will not fit in the box</div>
  • 效果


    以下 div 容器内的文本无法完全显示,可以看到它被裁剪了。


    div 使用 "text-overflow: ellipsis;":


    This is some long text that will not fit in the box

    div 使用 "text-overflow: clip;":


    This is some long text that will not fit in the box

    div 使用自定义字符串 "text-overflow: >>;" (只在 Firefox 浏览器下有效):


    This is some long text that will not fit in the box

3、换行

  • 如果某个单词太长,不适合在一个区域内,它扩展到外面。

  • CSS3 中,自动换行属性允许强制文本换行 - 即使这意味着分裂它中间的一个字。

属性 描述 CSS 备注 🔗
word-break 规定非中日韩文本的换行规则 3 🔗
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行 3 🔗
  • 属性值
word-break 值 描述
normal 使用浏览器默认的换行规则
break-all 允许在单词内换行
keep-all 只能在半角空格或连字符处换行
word-wrap 值 描述
normal 只在允许的断字点换行(浏览器保持默认处理)
break-word 在长单词或 URL 地址内部进行换行
  • 允许长文本换行。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <style>
    p.test {
    width: 11em;
    border: 1px solid #000000;
    word-wrap: break-word;
    }
    </style>
    1
    2
    <p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word
    will break and wrap to the next line.</p>
  • 效果


    This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.


3.1 单词拆分换行

  • CSS3 单词拆分换行属性指定换行规则。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <style>
    p.test1 {
    width: 9em;
    border: 1px solid #000000;
    word-break: keep-all;
    }
    p.test2 {
    width: 9em;
    border: 1px solid #000000;
    word-break: break-all;
    }
    </style>
    1
    2
    <p class="test1"> This paragraph contains some text. This line will-break-at-hyphenates.</p>
    <p class="test2"> This paragraph contains some text: The lines will break at any character.</p>
  • 效果


    This paragraph contains some text. This line will-break-at-hyphenates.


    This paragraph contains some text: The lines will break at any character.


4、浏览器支持

属性
text-shadow 4.0 10.0 3.5 4.0 9.5
box-shadow 10.0
4.0 -webkit-
9.0 4.0
3.5 -moz-
5.1
3.1 -webkit-
10.5
text-overflow 4.0 6.0 7.0 3.1 11.0
9.0 -o-
word-wrap 23.0 5.5 3.5 6.1 12.1
word-break 4.0 5.5 15.0 3.1 15.0
  • 表格中的数字表示支持该属性的第一个浏览器版本号。
  • 紧跟在 -webkit-, -ms-, -o- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
文章目录
  1. 1. 前言
  2. 2. 1、阴影
    1. 2.1. 1.1 文本阴影
    2. 2.2. 1.2 盒子阴影
    3. 2.3. 1.3 阴影颜色
    4. 2.4. 1.4 模糊效果
    5. 2.5. 1.5 伪元素中添加阴影效果
    6. 2.6. 1.6 卡片效果
      1. 2.6.1. 1.6.1 文字卡片
      2. 2.6.2. 1.6.2 图片卡片
  3. 3. 2、溢出
  4. 4. 3、换行
    1. 4.1. 3.1 单词拆分换行
  5. 5. 4、浏览器支持
隐藏目录