css3新增属性
- 边框属性
- 背景属性
- 文本属性
- 颜色属性
文本属性
| 属性 | 说明 |
|
text-shadow |
为文字添加阴影 |
|
box-shadow |
在元素的框架上添加阴影效果 |
|
text-overflow |
确定如何向用户发出未显示的溢出内容信号 |
|
word-wrap |
允许对长的不可分割的单词进行分割并换行到下一行 |
|
word-break |
指定了怎样在单词内断行 |
1. text-shadow（文字阴影）
text-shadow为文字添加阴影，阴影值之间用逗号隔开，每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成
语法：
div{
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;
/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;
/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;
/* color | offset-x | offset-y */
text-shadow: white 2px 5px;
/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;
/* Global values */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;
}
注意：
- 阴影相对文字的偏移量必写，颜色和模糊半径可选
- 当阴影大于一个时要用逗号区别开阴影之间的参数
- 当所给的阴影大于一个时，阴影应用的顺序为从前到后, 第一个指定的阴影在顶部.
- 这个属性同时适用于
::first-line以及::first-letter伪元素
例：
h1
{
/*水平阴影，垂直阴影，模糊的距离，以及阴影的颜色*/
text-shadow: 5px 5px 5px #FF0000;
}
2. box-shadow（盒子阴影）
box-shadow属性用于在元素的框架上添加阴影效果，可以设置多个阴影效果，并用逗号将他们分隔开该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。
几乎可以在任何元素上使用box-shadow来添加阴影效果。如果元素同时设置了 border-radius 属性 ，那么阴影也会有圆角效果。
语法：
div{
/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;
/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
}
在这里，如果 border-radius 属性的值：
- 两个值：表示x和y的偏移量
- 三个值：第三个值越大，模糊面积越大，阴影就越大越淡，但不能为负值（模糊度）
- 四个值：第四个值取正值时，阴影扩大；取负值时，阴影收缩（模糊范围）。默认为0，此时阴影与元素同样大
-
inset关键字：如果没有指定inset，默认阴影在边框外，即阴影向外扩散；使用inset关键字会使得阴影落在盒子内部
例：
<style>
blockquote {
padding: 20px;
box-shadow:
inset 0 -3em 3em rgba(0,0,0,0.1),
0 0 0 2px rgb(255,255,255),
0.3em 0.3em 1em rgba(0,0,0,0.3);
}
</style>
<body>
<blockquote><q>You may shoot me with your words,<br/>
You may cut me with your eyes,<br/>
You may kill me with your hatefulness,<br/>
But still, like air, I'll rise.</q>
<p>— Maya Angelou</p>
</blockquote>
</body>
3.text-overflow（文本溢出）
text-overflow文本溢出属性指定应向用户如何显示溢出内容。它可以被剪切，显示一个省略号（'...'，U + 2026 HORIZONTAL ELLIPSIS）或显示一个自定义字符串。
注意：
- 这个属性只对那些在块级元素溢出的内容有效，但是必须要与块级元素内联(inline)方向一致（举个反例：内容在盒子的下方溢出。此时就不会生效）
- 这个属性并不会强制“溢出”事件的发生
文本可能在以下情况下溢出：当其因为某种原因而无法换行(例子：设置了"white-space:nowrap")，或者一个单词因为太长而不能合理地被安置(fit)
“关于更多text-overflow 属性的使用，在这里我已经做出了详解：点击链接跳转 ”
3.word-wrap（单词换行）
word-wrap自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字
注意：
-
word-wrap属性原本属于微软的一个私有属性，在CSS3现在的文本规范草案中已经被重名为overflow-wrap -
word-wrap现在被当作overflow-wrap的 “别名”。稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。
p {
/*表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行*/
word-wrap:break-word;
}
4.word-break（单词拆分换行）
word-break指定了怎样在单词内断行
div{
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* deprecated */
}
-
normal：使用默认的断行规则 -
break-all：对于non-CJK (CJK 指中文/日文/韩文) 文本，允许在单词内换行。 -
keep-all：只能在半角空格或连字符处换行
OK，在这里我大概把css3中新增的文本属性介绍完了，有不对的望各位大佬明确指出~~