背景与阴影的相关知识

背景属性

• 背景颜色 background-color
• 背景图片 background-image
• 背景图片的重复方式 background-repeat
• 示例
  

背景图片的定位

• background-position属性
  关键字：水平方向：left、center、right
  垂直方向：top、center、bottom
  百分比;0% 50% 100%
  像素值
• CSS Sprites

背景的渐变

• 线性渐变

background:linear-gradient(<angle>||<direction>,
<color_stop>,<color_stop>...);

示例

为了添加透明度，可以使用rgba()方法来定义终止色。

• 径向渐变

background:radial-gradient(<shape>||<size>at<position>
,<color_stop>,<color_stop>..);

示例

transparent透明度
opacity设置透明度

阴影属性

• 文字属性
  text-shadow:text-shadow:h-shadow v-shadow blur color;
• 盒子阴影
  box-shadow:h-shadow v-shadow blur spread color;
• h-shadow 阴影的水平距离
• v-shadow 阴影的垂直距离
• blur 阴影的模糊半径
• spread 阴影的大小
• color 阴影的颜色