每日总结

6/21

每日单词

directory 目录	paragraph：段落
execute：执行	stack 堆
browser：浏览器	protocol：协议
free 免费的	binary 二进制
batch 批处理	command 命令
indent 缩进	detect 检测
answer 回答	assign to 指定到
rights权限	information：信息

CSS3新增特性

---

@Font-face 特性

加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

Word-wrap & Text-overflow 样式

Word-wrap

设置word-wrap: break-word的话，在单词换行的情况下，可保持单词的完整性。

Text-overflow

它与 word-wrap 是协同工作的，word-wrap设置或检索当当前行超过指定容器的边界时是否断开转行，而 text-overflow 则设置或检索当当前行超过指定容器的边界时如何显示, 我们在父容器设置overflow: hidden, 然后设置“text-overflow”属性，有“clip”和“ellipsis”两种可供选择。"clip"表示直接切割，"ellipsis"表示用省略号代替。

---

文字渲染（Text-decoration）

• Text-fill-color: 文字内部填充颜色
• Text-stroke-color: 文字边界填充颜色
• Text-stroke-width: 文字边界宽度

---

CSS3 的多列布局（multi-column layout）

• Column-count：表示布局几列。
• Column-rule：表示列与列之间的间隔条的样式
• Column-gap：表示列于列之间的间隔

---

边框和颜色（color, border）

支持rgba和hsl表示颜色, 支持圆角，阴影等效果。

---

CSS3 的阴影（Shadow）和反射（Reflect）效果

阴影效果，阴影效果既可用于普通元素，也可用于文字。

---

CSS3 的 Transitions, Transforms 和 Animation

Transitions

• transition-property：用于指定过渡的性质，比如 transition-property:backgrond 就是指backgound参与这个过渡
• transition-duration：用于指定这个过渡的持续时间
  transition-delay：用于制定延迟过渡的时间
• transition-timing-function：用于指定过渡类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

Transforms

指拉伸，压缩，旋转，偏移等等一些图形学里面的基本变换。

Animation

@-webkit-keyframes anim1 { 0% { Opacity: 0; Font-size: 12px; } 100% { Opacity: 1; Font-size: 24px; } } .anim1Div { -webkit-animation-name: anim1 ; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: 4; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; }