Transition简介
各浏览器下的兼容性写法
老版Chrome -webkit-xxx
FF -moz-xxx
IE -ms-xxx
opera -o-xxx
标准、高版本Chrome xxx
JS
兼容型写法
大写:Webkit Transition =…
全都加一遍:Webkit…、Moz…、O…、Ms…、…
rgba颜色值
含义
r Red 红 0-255
g Green 绿 0-255
b Blue 蓝 0-255
a Alpha 透明 0-1
多背景
逗号分开
background: url(a.jpg) 0 0, url(b.jpg) 0 100%;
背景尺寸
background-size:x y
background-size:100% 100%
Cover 放大
Contain 缩小
background-origin : border | padding | content
border-box: 从border区域开始显示背景。
padding-box: 从padding区域开始显示背景。
content-box: 从content区域开始显示背景。
background-clip
border: 从border区域向外裁剪背景。
padding: 从padding区域向外裁剪背景。
content: 从content区域向外裁剪背景。
no-clip: 从border区域向外裁剪背景。
text :文本
线性渐变格式
linear-gradient([<起点> || <角度>,]? <点>, <点>…)
只能用在背景上
IE filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’,endColorstr=’#ff0000′,GradientType=’1′);
参数
起点:从什么方向开始渐变 默认:top
left、top、left top
角度:从什么角度开始渐变
xxx deg的形式
点:渐变点的颜色和位置
black 50%,位置可选
线性渐变实例
最简单
red, green
从上到下
起点位置
left top, red, green
30deg, red, green
逆时针
repeating-linear-gradient
多个点
#F00, #FFFC00, #01B439, #00EAFF, #000390, #FF00C6
线性渐变实例(2)
加入点的位置
top, red 40%, green 60%
top, red 50%, green 50%
同一个位置两个点——直接跳变
也可以用px
配合rgba
top, rgba(255,255,255,1), rgba(255,255,255,0)
加入背景图片
background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)), url(a.gif)
径向渐变格式
radial-gradient([<起点> || <角度>,]? [<形状> || <大小>,]? <点>, <点>…);
参数
起点:同线性渐变 默认:中心
形状: ellipse、circle 默认: circle
大小:要给出起点,否则会和“起点”冲突
50px 50px
文字阴影
text-shadow:x y blur color, …
参数
x 横向偏移
y 纵向偏移
blur 模糊距离
color 阴影颜色
文本阴影如果加很多层,会很卡很卡很卡
文字阴影应用
最简单用法
text-shadow:2px 2px 4px black
阴影叠加
text-shadow:2px 2px 0px red, 2px 2px 4px green;
先渲染后面的,再渲染前面的
文字描边
-webkit-text-stroke:宽度 颜色
盒模型阴影
用法
box-shadow:[inset] x y blur [spread] color
参数
inset:投影方式
inset:内投影
不给:外投影
x、y:阴影偏移
blur:模糊半径
spread:扩展阴影半径
先扩展原有形状,再开始画阴影
color