css3.0
为了满足各个浏览器的兼容性 加前缀
-webkit- 谷歌的浏览器内核
-ms- ie内核
-moz- 火狐 内核
-o- opera 内核
透明度
1.rgba 在css3.0中提出的表示颜色的方式,a指的是透明度
2.opacity(透明度)
3.transparent 表示全透明
rgba的透密和opcity的透明区别:
rgba的不会继承,opcity会继承
阴影
盒子阴影
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。
inset 可选。将外部阴影 (outset) 改为内部阴影。
文字阴影
text-shadow: h-shadow v-shadow blur color;
h-shadow 必需。水平阴影的位置。允许负值;
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。
背景
背景
背景颜色 background-color
背景图片 background
背景大小 background-size
背景重复 background-repeat
背景图片居中 background-position:center top
背景附着 background-attachment:fixed
不平铺 no-repeat
裁剪背景
background-clip:
background-clip:content-box;
padding-box 把边框下面去掉
content-box 内边距下面 也没有背景
渐变背景
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
direction 用角度值指定渐变的方向(或角度)。
color-stop1, color-stop2,… 用于指定渐变的起止颜色。
/* 渐变轴为45度,从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
径向渐变 radial-gradient
background-image: radial-gradient(red, green, blue);
去除插入白边的bug
插入图片的时候 两张图片之间会产生一个10px的白边
解决方式:
1.把图片转成块级元素
2. vertical-align: middle;