CSS3HTML5的基本写法

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

你可能感兴趣的:(CSS3HTML5的基本写法)