css3整理
简介
l 选择器
l 框模型
l 背景和边框
l 文本效果
l 2D 转换
l 动画
l 多列布局
l 用户界面
边框
l border-radius
l border-radius:25px; 边框圆角
l box-shadow 边框阴影
l box-shadow: 10px 10px 5px #888888;
l box-shadow: h-shadow v-shadow blur spread color inset;
l border-image 边框图片
背景
l background-size:x,y
l 背景图片的尺寸,绝对大小或者百分比。
l background-origin
l background-origin:content-box|padding-box 或 border-box;
l 分别表示内部,整体和包含外部整体。
文本效果
l text-shadow
l text-shadow: 5px 5px 5px #FF0000;
l 水平,垂直,模糊距离,颜色。
l word-wrap:
l p {word-wrap:break-word;}自动换行
l 自定义字体
l 声明:@font-face{
l font-family: myFirstFont;
l src: url('Sansation_Light.ttf'),
l url('Sansation_Light.eot'); /* IE9+ *
l (font-weight:bold;)/}
l 使用bold字体时,必须再次声明bold字体
2D效果
l translate()
l transform: translate(50px,100px);移动
l rotate()
l transform: rotate(30deg);旋转角度
l scale([x],[y])
l 放大|缩小,参数:长度倍数,宽度倍数。
l skew()
l transform: skew(30deg,20deg);
l 翻转给定的角度。x轴,y轴。
l matrix()
l 转、缩放、移动以及倾斜元素。
动画
l transition: width 2s, height 2s, transform 2s;
l div:hover
l 动画
l 声明: @keyframes
l keyframes myfirst
l {
l from {background: red;}
l to {background: yellow;}
l }
l from-to:0-100%;还可以:0-25%-50%-75%-100%
l 使用:animation: myfirst 5s;
多列
l column-count
l 分成列数
l column-gap
l 列间隔
l column-rule
l 规定列之间的宽度、样式和颜色规则。
l column-rule:3px outset #ff0000;
l column-span:规定跨越的列数
CSS3 用户界面
l resize
l 元素可由用户调整大小
l box-sizing
l 属性允许您以确切的方式定义适应某个区域的具体内容。
l outline-offset
l outline-offset:15px;
outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。