注：not finished
浏览器前缀简介及应用
- -ms- IE
- -moz- 基于Gecko引擎的浏览器，如Firefox
- -o- Opera
- -webkit- 基于Webkit引擎的浏览器,如Chrome、Safari
CSS3边框
- border-radius：x,y,距离，大小，color，inset
- box-shadow
- border-image(不支持IE)
border-radius和box-shadow支持IE9+
CSS3圆角
-
border-radius
4：左上，右上，右下，左下
3：左上，右上左下，右下（对角线）
2：左上右下，右上左下（对角线）
border-top-left-radius左上角
CSS3背景
background-image (-webkit-,-o-)
用多个url分开，最先写的在最上面
background-size
在CSS3之前，背景图像大小由图像的实际大小决定
- length：宽高
- Percentage（%）,是相对父元素的宽高的百分比大小
- cover：把图像拓展到足够大，以使背景图像完全覆盖背景区域;背景图像的某些部分也许无法显示在背景定位区域中
- 是按照图片的比例放大或缩小至充满容器，而不是按照容器的比例大小来缩放
- 如果照片的比例和容器的比例不一致，必定会导致 照片的不完整性
- contain 把图像拓展盒子最大尺寸，以使其宽高完全适应内容区域
必定会出现一张完整的图在容器中- no-repeat 出现留白
- repeat 平铺整个容器，多余的部分裁减掉
background-origin （背景图片开始位置）
指定了背景图像的位置区域,(相对位置)
- border-box(边框会把背景图像盖住)
- padding-box(default)
- content-box
background-clip背景裁剪，规定背景的绘制区域
背景裁剪属性是指从指定位置开始绘制
- border-box(default)
- padding-box
- content-box
注：多背景属性设置（高版本浏览器才识别），最先写的在最上层
CSS3渐变
- 线性渐变
background:linear-gradient() 向下/向上/向左/向右/对角方向 - 径向渐变
background:radial-gradient() 由它们的中心定义
CSS3文本效果
text-shadow 文本阴影
水平 垂直 迷糊 大小 颜色 inset
允许设置负值 可进行多阴影设置
火焰效果
0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;
box-shadow 盒子阴影
div { box-shadow: 10px 10px 5px grey;} 也可用 ::before 和 ::after 两个伪元素中添加阴影效果
text-overflow 省略号设置
文本溢出：如何显示溢出内容
- clip：不显示省略号，简单的剪切
- ellipsis：当文本溢出，显示省略号
word-wrap 单词换行
- break-word
- normal
word-break
规定非中日韩文本的换行规则。
- normal 单词一行写完，会超出
- break-all 允许在单词内换行
- keep-all 只能在半角空格或连字符处换行。
white-space
空白元素的处理
- normal
- norwap 不换行
- pre
- pre-wrap
- pre-line
- break-spaces
CSS3 字体
通过CSS3，web设计师可以使用他们喜欢的任意字体。 @font-face 规则
CSS3 2D转换
tranfrom:
- translate(x轴,y轴)
- rotate(deg)+顺时针，-逆时针
- scale(宽度，高度)变大或减小。倍数,占位不变
- skew()X轴Y轴倾斜的角度。负数则为相反的方向
- matrix()6个参数:旋转，缩放，移动(平移),倾斜
CSS3 3D转换
transfrom:
- translate3d(x,y,z)移动出去的不占位
- translateX(x)
- translateY(y)
- translateZ(z) +变大，-变小
- scale3d(x,y,z)
- scaleX(x)
- scaleY(y)
- scaleZ(z)
- rotate3d(x,y,z,angle)
- rotateX(angle)
- rotateY(angle)
- rotateZ(angle) 2D的默认即中心点旋转
- perspective(n) 转化元素的透视视图
景深--近大远小 透视 物体的轴始终相对自己
transform: translate(30px, 20px) rotate(20deg);
// 需要搭配transition过渡使用才有效果。
transition: transform 2s;
CSS3 过渡
- transition-property 规定应用过渡的CSS属性的名称
- all(default);
- transition-duration 过渡花费的时间
- 0(default)
- transition-timing-function 过渡效果的时间曲线
- ease慢快慢 (default)
- linear匀速
- ease-in慢速开始
- ease-out慢速结束媒体
- ease-in-out以慢速开始和结束
- transition-delay 延迟
- 0(default);
- transition: all 2s(duration) linear 1s(delay);
注：CSS3过渡是元素从一种形式逐渐改变成为另一种的效果，要实现，必须规定两项内容：
- 规定把效果加到那个CSS属性上
- 规定效果的时长
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
-webkit-transition:width 2s, height 2s,
background-color 2s, -webkit-transform 2s;
transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC; q
width:200px;
height:200px;
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
CSS3动画
作用：不需要事件驱动，当页面加载会直接运行，当结束时候会回到初始状态
-webkit,-ms-,-moz-
定义：@keyframes 绑定到一个选择器上(name)
调用：animation: name 5s(default0);
概念：样式逐渐变化为另一种样式效果 form->to==0%->100%
动画执行的条件：
动画名称
动画时长
- animation-name 动画名称
- animation-duration 动画时间
0（default） - animation-timing-function 速度曲线
- ease 慢快慢（default）
- linear 匀速
- ease-in 慢->块
- ease-out 块->慢
- ease-in-out 慢快慢
- step-start 跳到鼠标开始那帧
- step-end 跳到鼠标结束那帧
- animation-delay 动画延迟 允许负值(自身能延迟不用借助transition)
- animation-iteration-count 播放次数
- 1（default）
- infinite(无限循环)
- animation-direction: 是否在下一周期逆向转
- normal(default)
- alternate(反向播放)
- animation-play-state 规定动画是运行或暂停
- running(default)
- paused（鼠标滑过会暂停，离开继续执行）
- animation-fill-mode: 规定对象动画时间之外的状态
最终会清除动画回到初始位置
none
forwards保留最终位置(在最后一个关键帧中定义) - animation:name duration time-function delay interation-count direction play-state/paused
//<p> 元素由浏览器窗口右边滑至左边
p{
animation-duration: 3s;
animation-name: slidein;
height: 30px;
background: red;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
MDN
