CSS MASTERY Chapter 4 概要及感想

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

• 应用：创建项目符号

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

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

山顶角

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

投影

• 设置wrapper的背景，再将内部元素进行左上方偏移（使用负margin或者相对定位）
• CSS3 box-shadow 垂直偏移 水平偏移 模糊半径 颜色

• opacity 有继承性，会使文本等其他子元素也半透明
• IE 专用: filter: alpha(opacity=80);
• RGBa 设置background-color
• png图像在IE6及以下使用AlphaImageLoader（为防止css失效，放在条件注释代码中）