CSS3 文本效果

---

CSS3 文本效果

CSS3文本效果主要包括以下几个方面：

1. 文本溢出（Text Overflow）：当文本溢出包含元素时，可以用不同的方式处理。例如，可以使用"clip"剪裁文本，使用"ellipsis"添加省略号，或者自定义一个字符串来显示。
2. 文本阴影（Text Shadow）：向文本添加阴影，可以通过指定水平阴影、垂直阴影、模糊的距离以及阴影的颜色来实现。
3. 文本换行（Word Wrap）：如果一个单词太长不适合在一个区域内显示，可以使用自动换行属性强制文本换行，即使这意味着分裂单词。

以上内容仅供参考，如需了解更多信息，请访问CSS3相关文档进行学习。

CSS3 文本阴影

CSS3文本阴影通过text-shadow属性来设置。文本阴影可以为文本添加一个或多个阴影，使文本看起来更加突出或富有层次感。

text-shadow属性的语法格式为：

text-shadow: h-shadow v-shadow blur-radius color;

• h-shadow：水平方向阴影的位置。正值表示阴影将在文本右边，负值表示阴影将在文本左边。
• v-shadow：垂直方向阴影的位置。正值表示阴影将在文本下边，负值表示阴影将在文本上边。
• blur-radius：可选参数，用于设置阴影的模糊程度。值越大，阴影边缘越模糊。
• color：阴影的颜色。可以是任何有效的CSS颜色值。

以下是一些示例：

1. 在水平方向和垂直方向各添加一个2像素的阴影：

h1 {
  text-shadow: 2px 2px;
}

2. 在水平方向添加一个红色的阴影：

h1 {
  text-shadow: 2px 0 red;
}

3. 添加一个带有黑色阴影的白色文本：

h1 {
  color: white;
  text-shadow: 2px 2px black;
}

CSS3 box-shadow属性

CSS3的box-shadow属性允许我们在几乎任何元素上创建阴影效果，类似于在设计软件中的“drop shadow”。这些阴影效果允许我们在原本平面的、二维的页面上创建出深度（第三维）的错觉。

box-shadow属性的语法是：

box-shadow: offset-x offset-y blur spread color position;

其中：

• offset-x 和 offset-y 是阴影的水平位置和垂直位置。正值表示阴影在元素的右边和下边，负值表示阴影在元素的左边和上边。
• blur 是阴影的模糊程度，值越大阴影边缘越模糊。
• spread 是阴影的大小，正值会增加阴影的扩展区域，负值会减小阴影的扩展区域。
• color 是阴影的颜色。
• position 是阴影的位置，可选值为 outside、inside、left、right、top 和 bottom。

例如：

.box {
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

上面的代码将在元素的右下角创建一个颜色为黑色，模糊程度为5像素，没有扩展的阴影。

注意，虽然box-shadow可以接收5个参数，但是它并不是一个独立的属性，不能像border等属性一样被单独拆分使用。

CSS3 Text Overflow属性

CSS3中的text-overflow属性主要用于规定当文本溢出包含元素时发生的事情。这个属性常用的值有以下几个：

1. visible：指虽然文本内容超过可以显示的位置的长度，但仍为可见。
2. clip：指将显示超过文本框区域的内容直接截断，但是这种截断只是视觉上的截断，可能会存在仍保留了半个字符的情况。
3. ellipsis：文字截断后，使用…显示在末尾。
4. '.' 和 ''：这两个属性值的组合，这种目前大部分浏览器尚未兼容。

需要注意的是，不同的浏览器对这些属性的支持情况可能会有所不同。所以在使用这些属性时，需要考虑到兼容性问题。建议在使用前先查阅相关的浏览器兼容性信息。

CSS3 换行

在 CSS3 中，可以通过 word-wrap 和 white-space 这两个属性来实现文本自动换行。

word-wrap 属性允许长单词或 URL 地址在必要的时候进行换行，其常用的属性值有 normal 和 break-word。其中，normal 表示只在允许的断字点换行（浏览器保持默认处理），而 break-word 则表示在长单词或 URL 地址内部进行换行。

white-space 属性可以设置文本换行方式，其常用的属性值有 normal、pre、pre-wrap 和 pre-line。其中，normal 表示合并空白符序列，但是保留换行符；pre 表示空白符会被浏览器保留，其行为方式类似 HTML 中的

 标签；pre-wrap 表示保留空白符序列，但是正常地进行换行；而 pre-line 则表示合并空白符序列，但是保留换行符。
 
  
参考示例：
 
  
p {
  word-wrap: break-word;  /* 在长单词或 URL 地址内部进行换行 */
  white-space: pre-wrap;   /* 保留空白符序列，正常地进行换行 */
}
 
  
CSS3 单词拆分换行
 
  
在 CSS3 中，可以使用 word-break 属性来实现单词拆分换行。该属性允许在单词内部进行换行，而不是仅仅在整个单词之间进行换行。
 
  
常见的属性值包括：
 
  
 
   
normal：默认值，不允许在单词内部进行换行。
 
   
break-all：允许在单词内部进行换行，即使这样做会导致单词被拆分。
 
   
keep-all：允许在单词内部进行换行，但尽可能避免拆分单词。
 
  
 
  
示例代码如下：
 
  
p {
  word-break: break-all; /* 允许在单词内部进行换行 */
}
 
  
这样设置后，当文本内容超出容器宽度时，浏览器会尝试将单词拆分，以便在整个容器内实现换行。
 
  
新文本属性
 
  
以下的图表展示了CSS3新文本属性：
 
  
 
   
 
    
 
     
文本属性
 
     
描述
 
    
 
   
 
   
 
    
 
     
text-overflow
 
     
内容溢出状态下的文本处理方式
 
    
 
    
 
     
text-shadow
 
     
向文本添加一个或多个阴影
 
    
 
    
 
     
text-align
 
     
设定文本对齐方式