为了更好的兼容各个浏览器,在写css样式时需要加上前缀(表示该属性未成为W3C标准)
/*前缀 浏览器*/
-webkit chrome(谷歌)和Safari(苹果)
-moz firefox(火狐)
-ms IE
-o opera(欧朋)
一、边框
1.圆角效果:border-radius:10px/*所有角都是半径为10px的圆角*/
border-radius:5px 4px 3px 2px /*顺时针*/
2.多种颜色的边框:border-width:6px; border-top-colors:#000 #111 #222 #333 #444 #555;/*border的宽度是5px,即可以写五种颜色,(若写3中则剩下的像素为最后一种颜色)*/
3.阴影:box-shadow:4px/*(必写,)x轴偏移量 */2px/*(必写)Y轴偏移量*/6px/*(可选)阴影模糊半径*/1px/*(可选)阴影扩展半径*/#ccc/*(可选)阴影颜色*/ insert/*(可选)投影方式:内投insert外投outset*/
二、颜色
1.颜色为透明色:rgba(R,G,B,A)/*R(red:0~255);G(green:0~255);B(blue:0~255);A(alpha透明度:0~1) */
color:rgba(100,230,200,0.5);
2.渐变颜色:linear-gradient(to bottom,#fff,#999)/*指定渐变方向(默认180deg=to bottom 可选值top left左上到右下,top right右上到左下,to bottom right右下到左上);颜色的起点;颜色的结束点*/
@keyframe 动画名{
0% {
background:red;
}
100% {
background:green;
}
0% {
background:red;
}
100% {
background:green;
}
.div {
width:200px;
height:200px;
animation: 动画名 动画执行时间 ;
/*1.animation-name:动画名
2.animation-duration:动画执行时间
3.animation-timing-function:(ease-out)
4.animation-delay:规定动画何时开始
5.animation-direction:规定动画是否在下一周期逆向播放
6.animation-iteratiomn-count:动画执行次数(infinite循环执行)
7.animation-direction:动画播放方向(normal正向;alternate正向后反向)
8.animation-play-state:动画播放状态(running播放;paused暂停)
9.animation-fill-mode:动画开始之前和结束之后发生的操作(none)动画按预期进行与结束,完成后返回第一帧;(forwards)动画结束后,停在最后一帧;(backwards)会在向元素应用动画样式时迅速应用动画的初始帧;(both)动画同时有forwards和backwards效果
/*前缀 浏览器*/
-webkit chrome(谷歌)和Safari(苹果)
-moz firefox(火狐)
-ms IE
-o opera(欧朋)
一、边框
1.圆角效果:border-radius:10px/*所有角都是半径为10px的圆角*/
border-radius:5px 4px 3px 2px /*顺时针*/
2.多种颜色的边框:border-width:6px; border-top-colors:#000 #111 #222 #333 #444 #555;/*border的宽度是5px,即可以写五种颜色,(若写3中则剩下的像素为最后一种颜色)*/
3.阴影:box-shadow:4px/*(必写,)x轴偏移量 */2px/*(必写)Y轴偏移量*/6px/*(可选)阴影模糊半径*/1px/*(可选)阴影扩展半径*/#ccc/*(可选)阴影颜色*/ insert/*(可选)投影方式:内投insert外投outset*/
二、颜色
1.颜色为透明色:rgba(R,G,B,A)/*R(red:0~255);G(green:0~255);B(blue:0~255);A(alpha透明度:0~1) */
color:rgba(100,230,200,0.5);
2.渐变颜色:linear-gradient(to bottom,#fff,#999)/*指定渐变方向(默认180deg=to bottom 可选值top left左上到右下,top right右上到左下,to bottom right右下到左上);颜色的起点;颜色的结束点*/
三、文本
文本阴影:text-shadow:2px 2px 4px #eff2ef;/*pram1:阴影水平距离,正值右偏,负值左偏;pram2:阴影垂直距离,正值下偏,负值上偏;pram3:阴影模糊程度,越大越模糊【不能为负】;pram4:阴影颜色*/
【兼容性问题】: ie9及更早不支持
@keyframe 动画名{
0% {
background:red;
}
100% {
background:green;
}
}
【兼容性问题】
@keyframe 动画名{
0% {
background:red;
}
100% {
background:green;
}
}
@-moz-keyframe 动画名{/* Firefox */0% {
background:red;
}
100% {
background:green;
}
}
@-webkit-keyframe 动画名{/* Chrome、Safair */
0% {
background:red;
}
100% {
background:green;
}
}
(关于调用).div {
width:200px;
height:200px;
animation: 动画名 动画执行时间 ;
/*1.animation-name:动画名
2.animation-duration:动画执行时间
3.animation-timing-function:(ease-out)
4.animation-delay:规定动画何时开始
5.animation-direction:规定动画是否在下一周期逆向播放
6.animation-iteratiomn-count:动画执行次数(infinite循环执行)
7.animation-direction:动画播放方向(normal正向;alternate正向后反向)
8.animation-play-state:动画播放状态(running播放;paused暂停)
9.animation-fill-mode:动画开始之前和结束之后发生的操作(none)动画按预期进行与结束,完成后返回第一帧;(forwards)动画结束后,停在最后一帧;(backwards)会在向元素应用动画样式时迅速应用动画的初始帧;(both)动画同时有forwards和backwards效果
*/
-moz-animation: 动画名 动画执行时间 ;
-webkit-animation: 动画名 动画执行时间 ;
}