[css] css3

参考手册
选择器
选择器参考手册

浮动
inline-block

背景和边框
border-radius
topleft topright bottomrigth bottomleft
前四个为第一个，后四个为第二个

border-radius: 1-4 length|% / 1-4 length|%;

border radius详解

box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor

阴影效果详解

border-image: source slice width outset repeat
border image详解

background-image
background-size
background-origin
background-clip

渐变
标准语法必须放在最后（非标准的例如-webkit-linear-gradient）

background: linear-gradient(direction, color-stop1, color-stop2, ...);background: linear-gradient(angle, color-stop1, color-stop2);repeating-linear-gradient /* 重复线性渐变 */background: radial-gradient(center, shape size, start-color, ..., last-color);

径向渐变详解

文字特效
text-shadow
box-shadow 参见背景那节
text-overflow ellipsis(…) clip()
word-wrap: break-word; 不加就overflow了
word-break: keep-all; break-all; 会根据-来分割单词与否

@font-face

@font-face{font-family: myFirstFont;src: url(sansation_light.woff);}@font-face{font-family: myFirstFont;src: url(sansation_bold.woff);font-weight:bold;}/* 包含了同一字体的两种形式，可以使用bold字体 */

2D转换
translate x y 位移
rotate deg 顺时针旋转 可有负值
scale x y 放大缩小
skew x y 斜转 x和y的转方向好像不太一样
matrix

3D转换
rotateX
rotateY

perspective
perspective-orgin

过渡与动画
transition: [attr] time

@keyframes
{
from {background: red;}
to {background: yellow;}
}
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
animation

框大小
box-sizing 有点类似ie盒模型

图片
filter 给图片添加可视效果
滤镜参考手册

多列布局
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span 元素跨列
column-width 指定元素宽度 可以用来做响应式布局

用户界面
resize 制定能否由用户调整大小 none|both|horizontal|vertical
box-sizing
outline outline-offset 定义轮廓 轮廓不占用空间 offset可为负值

@media

@media not|only||all mediatype and (expressions) {    CSS-Code;}

mediatype
all 用于所有多媒体类型设备
print 用于打印机
screen 用于电脑屏幕，平板，智能手机等
speech 用于屏幕阅读器

expressions

flexbox
flex-direction 弹性盒子排列方向 row | row-reverse | column | column-reverse
justify-content 内容对其方向 flex-start | flex-end | center | space-between | space-around
flex-wrap 换行 nowrap | wrap | wrap-reverse
flex-flow [flex-direction] || [flex-wrap]
align-items 轴线内flex item对齐方式 flex-start | flex-end | center | baseline | stretch
align-content 轴线对齐方式 flex-start | flex-end | center | space-between | space-around | stretch

以下定义在item上
order
flex-grow 放大比例 默认为0
flex-shrink 缩小比例 默认为1 为0时不缩小 负数无效
flex-basis
flex none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;

flexbox不会有外边框合并