- 五大主流浏览器内核
a) IE：Trident -ms-
b) 谷歌：Webkit -webkit-
c) 火狐：Gecko -moz-
d) 苹果：Webkit -webkit-
e) 欧朋：Presto -o- - border-radius：设置圆角边框，各浏览器对此属性兼容较好，所以在使用时不需要加前缀，但是注意IE的低版本不支持该属性。格式如下
a) 左上角:border-top-left-radius
b) 右上角:border-top-right-radius
c) 左下角:border-bottom-left-radius
d) 右下角:border-bottom-right-radius
e) border-radius:值（四个角相同）
f) border-radius:值1（左上、右下）值2（右上、左下）
g) border-radius:值1（左上）值2（右上、左下）值3（右下）
h) border-radius:值1（左上）值2（右上）值3（右下）值4（左下） - box-shadow：设置元素（盒子）的阴影，格式：box-shadow：水平位移值垂直位移值阴影半径阴影外扩阴影颜色，注意阴影外扩属性值常被省略，即经常使用四个值，另外一个盒子可以设置多个阴影效果，效果间用逗号分隔，此时需要注意后面的阴影半径要大于前面阴影半径，否则会被覆盖，在使用该属性时可以加前缀
- border-image：设置元素边框为图像，包含如下单一属性
a) border-image-source：设置图像地址，格式border-image-source:url(路径);
b) border-image-slice：设置图像划分方式（采用九宫格的划分方法，九宫格里面的四个角保持原状，分别位于元素的四个角上，角和角间的区域默认会拉伸，九宫格最中间的格子默认透明，可以使用fill来显示出来），主意该属性的属性值没有单位，只写具体的数值，可以通过值的个数表示四个边
border-image-slice：值（上下左右相同）
border-image-slice：值1（上下）值2 （左右）
border-image-slice：值1（上）值2（左右）值3（下）
border-image-slice：值1（上）值2（右）值3（下）值4（左）
border-image-width：设置图像的边框宽度，如果不设置，边框宽度和border-width的宽度相同，在火狐里面为0，在谷歌里面为3，可以将该属性的值设置成和slice的值相同
c) border-image-outset：设置边框图像外扩，默认边框图像在元素的上方显示，就覆盖在元素上面，但是不占位，可以利用该属性调节边框位置，属性值的写法可以和slice相同
d) border-image-repeat：设置边框图像平铺方式，默认为拉伸即stretch、repeat（可能出现不完整的图像）、round（平铺，不会出现不完整图像）
e) border-image复合属性：url slice/width/outset repeat - background-image：设置多背景图，设置的格式为background-image:url(),url();注意，默认背景图都是平铺的，另外多个背景图会出现层叠关系，可以使用background的其它属性进行设置
- background-size：设置背景图尺寸，属性值为像素值、百分比、contain、cover，如果使用像素值或百分比，格式为background-size:宽度高度；注意如果只写一个值表示宽度，另一个值浏览器自动处理，即auto
a) contain：将背景图扩大，当有一个边达到元素边界时即停止扩大，可能出现背景图无法铺满整个元素的问题
b) cover：将背景图扩大，直达整个元素被铺满位置，会出现背景图超过元素的问题 - background-origin：设置背景图起始位置，属性值border-box/padding-box/content-box，测试时如果要看到效果，最好将边框类型设置为虚线
a) border-box:从边框下面开始
b) padding-box：从内边距下面开始，默认
c) content-box：从内容下面开始 - background-clip:剪切背景图，属性值border-box/padding-box/content-box
a) border-box:将边框以外的编辑剪切掉，在浏览器看不出效果，因为元素边框外面根本就不显示背景
b) padding-box：只保留从padding下面开始的背景，padding外面的背景被剪切掉
c) content-box：只保留从内容下面开始的背景，content外面的背景被剪切掉 - 线性渐变background：linear-gradient（to方向，颜色1，颜色2），注意颜色至少两个
- 径向渐变background：radial-gradient（at位置，颜色1，颜色2），注意颜色至少两个，另外这两种渐变如果要加前缀，需要将前缀加载属性值前面，因为background不是新增属性但是，值是新增的
- opacity：设置元素透明度，属性值为0-1,0表示完全透明，1表示不透明，注意他和rgba的区别，opacity的样式可以被子元素继承，但是rgba不可以继承
- 服务器端提供字体类型，格式
第一步：设置类型
@font-face{
font-family: 名称；
src: url(字体路径);
}
第二步：应用类型
div{
font-family: 上面定义的字体名称
} - transform：设置元素变形效果，需要结合相应函数使用，可以有如下函数
a) 移动：translate()
transform:translateX()
transform:translateY()
transform:translate(值1，值2)，如果只写一个值表示x方向
b) 缩放：scale()
transform:scale(倍数1, 倍数2),默认值为1，大于1放大，小于1缩小，如果写一个值表示宽高同时缩放相同的尺寸
transform:scaleX
transform:scaleY
c) 旋转：rotate()
d) transform：rotate(度数)，默认向右旋转，如果写负值表示向左旋转
e) 拉伸(倾斜)：skew()
transform:skewX()
transform:skewY()
transform:skew(值1，值2) - transition
- animation
transform:可以是HTML元素产生移动、缩放、旋转、变形等效果，该属性需要结合相应函数使用
移动：
沿X轴移动：transform:translateX(距离);
沿Y轴移动：transform：translateY(距离)；
沿X和Y轴同时移动transform:translate(距离)；注意如果在括号中只写一个值，表示沿X轴移动，如果写两个值，表示沿X轴和Y轴同时移动
沿X轴和Y轴同时移动：transform：translateX(距离) translateY(距离);
缩放：
沿X轴缩放：transform:scaleX(倍数);倍数的默认值为1，如果大于1表示放大，如果小于1表示缩小
沿Y轴缩放：transform：scaleY(倍数);
transform:scale(倍数)
旋转：
transform:rotate(度数);
倾斜
沿X轴和Y轴同时倾斜：transform:skew(度数);如果写一个值表示沿X轴倾斜，如果写两个值表示沿X轴和Y轴同时倾斜
沿X轴倾斜：transform:skewX(度数)
沿Y轴倾斜：transform：skewY(度数)
transform:rotate3D(x,y,z,度数)，如果沿X轴旋转，x值为1，y值和z值为0，如果沿y轴旋转，x和z的值为0，y为1
transform:rotateX(度数)
transform:rotateY(度数)
transform:rotateZ(度数)
transform：translateX（）
transform:translateY（）
transform:translateZ（）
注意：3D平移时如果要看到效果，需要在父元素上perspective属性，该属性可以产生一个3D视觉效果，可以将该属性的属性值设置为像素值，如1000px,需要注意设置的位置为父元素
transform-origin：设置元素必须时的参考点，属性值可以是像素值、百分比、关键字
关键字：
水平：left center right
垂直：top center right
transition：过渡
transition-property：设置过渡过程中，哪些CSS属性可以被改变，值可以是all/nonoe/自己指定的CSS属性
transition-duration：设置过渡效果所需时间，属性值为秒或者是毫秒，默认值0
transition-timing-function：设置过渡状态，属性值
ease：慢-快-慢
linear：匀速
ease-in：慢-快
ease-out:快-慢
ease-in-out：慢-快-慢
transition-delay：延迟执行时间，属性值为秒或毫秒
定义动画
@keyframes
动画名称{
from{
动画开始时的样式
}
to{
动画结束时的样式
}
}
@keyframes
动画名称{
0%{
开始时的样式
}
x%{
中间部分的样式
}
100%{
结束时的样式
}
}
动画应用
animation
animation-name：设置动画名称
animation-duration：设置动画完成所需时间，属性值为秒或毫秒，默认为0
animation-timing-function：设置动画完成时的状态，属性值有ease/linear/ease-in/ease-out/ease-in-out
animation-delay：设置动画延迟执行时间，属性值为秒或毫秒
animation-iteration-count：设置动画执行次数，默认为1次，属性值可以设置成多次，也可以设置成infinite（无限次）
animation-direction：normal（正常）、alternate（反转）
网友评论