css3常用属性

颜色模式

rgba(0,0,0,0.5) a代表alpha半透明通道

但凡是用到颜色的地方，都可以使用rgba颜色模式。 包括文字颜色，背景色，边框色。

opacity:0.1; 这个和rgba的差别在它会把内容的透明度改变

圆角

border-radius    圆角的半径

它可以设置多个值。多个值的用法和margin类似。
 
box-shadow: 水平偏移  垂直偏移  羽化   投影大小   颜色  inset(内投影)

内投影是可选的，注意没有outset。

盒子投影可设置多组值，用逗号隔开。

盒子投影

box-shadow: 水平偏移  垂直偏移  羽化   投影大小   颜色  inset(内投影)

内投影是可选的，注意没有outset。

PS : 盒子投影可设置多组值，用逗号隔开。

文字投影

text-shadow: 水平偏移  垂直偏移  羽化   颜色  

比盒子投影少了投影大小和内投影，其他用法跟盒子投影一样。

盒子投影和边框如果没设置颜色，默认会和文字的颜色相同（currentColor）。

背景图固定

background-attachment: fixed;

scroll: 随着页面的滚动轴背景图片将移动

fixed: 随着页面的滚动轴背景图片不会移动

效果：盒子滚动，但背景图是不动的，类似盒子固定定位。

背景图尺寸

background-size

取值：

固定值（px）： 100px  200px;

百分比（%）：  50%  ;      百分比是基于当前盒子的宽和度

特殊值：（出现特殊值的都不会变形）

auto          自动，正比例缩放。

cover         把图片填满整个盒子 (较常用)

contain  把图片完整显示，但是可能出现留白

background:url("../images/dd.png") no-repeat  left/contain;后面的/contain等同于background-size:contain;

可以通过 这个 来给背景图进行padding设置  例如 盒子宽高 给80px  background-size： 70px 70px; 这样就可以形成10px的padding 

模糊背景

 filter: blur(3px); 和opacity类似会把内容给模糊掉