html5+css3 (1)
课程内容大纲：
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：扩展阴影半径
先扩展原有形状，再开始画阴影
colo
