CSS MASTERY Chapter 4 概要及感想

1. background-position
   两个值分别是距离元素左边界、右边界；注意百分数和数值的定位区别。
   百分数值是元素的定位点与背景图片的定位点对齐。
   background简写顺序： 颜色 图片 重复 位置1 位置2

   • 应用：创建项目符号

2. 圆角框
   可以用CSS3属性、设置背景图像及repeat方式

   • 设置最顶和最底的背景图像，分别是上面的两个圆角、下面的两个圆角
   • 水平扩展的圆角框 sliding doors technique
     因为有四个包含圆角的图片，因此总共需要四个嵌套的元素，因此可以创建出宽度可以变化的盒子
     

3. 山顶角

   • 应用：创建蒙版盖住背景色
     
     
   • CSS3可以在background设置中多个图像多个属性
   • 或者是创建多个wrapper分别设置它们的background-image
   • border-radius Firefox、Safari兼容
   • border-image 将一个图像分成九个部分
     -webkit-border-image: url() 25% 25% 25% 25% / 边框宽度 重复方式（repeat、stretch、round）

4. 投影

   • 设置wrapper的背景，再将内部元素进行左上方偏移（使用负margin或者相对定位）
   • CSS3 box-shadow 垂直偏移 水平偏移 模糊半径 颜色
5. 不透明度
   
   • opacity 有继承性，会使文本等其他子元素也半透明
   • IE 专用: filter: alpha(opacity=80);
   • RGBa 设置background-color
   • png图像在IE6及以下使用AlphaImageLoader（为防止css失效，放在条件注释代码中）
     
6. css视差效果
   通过百分比设置background-position ，然后在增大屏幕宽度的时候，多个background-image的开始重复位置的增加速度不一样。
7. 图像替换文本
   对需要隐藏的部分设置很大的负值text-indent