首页 > 代码库 > CSS3 学习小结
CSS3 学习小结
写样式时有时遇到浏览器兼容问题：
-webkit-transition：chrome和safari
-moz-transition:firefox
-ms-transition:IE
-o-transition:Opera
但是在JS 中则不允许带前边的横杠，并且首字母大写，如WebkitTransition,MozTransition,MsTransition,OTransition
属性选择器：
设置样式的格式：
表签名[属性名=value]{}
表签名[属性名~=value]{}//属性值是一个词组用空格分隔，~=代表只要有一个value满足即可
标签名[属性名^=value]{}//属性值必须是是以value开头的
标签名[属性名attr$=value]//属性值必须是以value结束的
标签名[属性名attr*=value]//属性值必须是包含value的，可以是字母等
表签名[属性名|=value]//代表属性值是以value开始或是只有value（就是value）的
结构性伪类：
注意nth-child(n)和nth-of-type(n)，前者是找子节点，后者是找该类型的标签
E:nth-child(n):这句意思是从前往后找E标签父级中的第n个子元素，并且这个元素的类型还必须是E标签，这是在CSS3中，当n=1代表第一个子节点，而在JS中,则是n=0代表第一个子节点
若是想找同一父级如body下的不同子元素，则借助body *先找到所有子元素即可。
例：body里有p标签和h1标签，找同一父级元素下的h1标签：
<body>
<p></p>
</h1></h1>
</body>
body *：nth-child(2){background:red;}//
E:nth-child(odd):奇数行，或者是E:nth-child(2n-1)，有时也可以利用E:nth-child(3n)可以找到第3行/个，有时也用到E:nth-child(3n+1)；
E:nth-child(even):偶数行，或者是E:nth-child(2n)
E:nth-last-child(n):从后往前数找第n个子元素/子节点，E:nth-last-child(2n)，E:nth-last-child(2n-1)等
E:nth-of-type(n):从前往后找第n个E标签，body *:nth-type-of(n):找body下面所有标签类型的第n个的标签
E:nth-last-of-type(n):从后往前找。。。。。。同样的2n,2n-1也适用
E:first-child:找E元素中的第1个子元素/子节点，等同于E:nth-child(1)
E:last-child:找E元素中的最后一个子元素/子节点，等同于E:nth-last-child(1)
E:first-of-type:表示E父元素中的第一个子节点且节点类型是E的，等同于nth-of-type(1)
E:last-of-type表示E父元素中的最后一个子节点且节点类型是E的，等同于nth-last-of-type(1)
E:only-child表示E元素中只有一个子节点，注意：子节点不包含文本节点
E:only-of-type表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E，注意：子节点不包含文本节点
E:empty表示E元素中没有子节点。注意：子节点包含文本节点
1，新增颜色样式：r ,g，b，a//红绿蓝，每个值在0-255间，0代表黑色，1代表白色，a代表透明度0-1间
2，文本阴影：text-shadow：x y blur color;//四个参数，前两个（可以为正为负，正代表从上到下，负代表从下到上）为X轴方向，Y轴方向阴影偏移，然后是模糊距离，最后是阴影颜色，
x ------横向偏移
y ------纵向偏移
blur ---模糊距离
color---阴影颜色
可以加多层阴影中间用逗号分隔：text-shadow：（5px -4px 6px red,-8px 4px 7px green,5px 6px 7px yellow）;
但文本阴影若是加非常多层，会很卡
例：
浮雕文字：字体颜色设置为白色，阴影设置为黑色即可出现这种浮雕的效果
h1{font:100px/200px "微软雅黑"; text-align:center;color:#fff;text-shadow:2px 2px 4px #000;}
例：文字模糊动画：
h1{font:100px/200px "微软雅黑";text-align:center;color:#000;
text-shadow:0 0 0 rgba(0,0,0,1); transition:1s;}
h1:hover{color:rgba(0,0,0,0);text-shadow:0 0 100px rgba(0,0,0,0.5);}
文字描边：是webkit内核浏览器特哟的属性，所以要加前缀webkit
-webkit-text-stroke:宽度 颜色
文字方向：direction,样式值由rtl，ltr，但要配合unicode-bidi样式使用,否则文字不会从右向左
例：
p{width:300px;border:1px solid #000;font:14px/30px "宋体";direction:rtl;unicode-bidi:bidi-override;}
文本不换行：white-space:nowrap;
Text-overflow:定义省略文本的处理方式：
clip:无省略号
ellipsis：省略号，注意配合overflow-hidden和white-space：nowrap一起使用，
p{width:300px;border:1px solid #000; font:14px/30px "宋体"; white-space:nowrap;overflow-hidden;text-overflow:ellipsis;}
自定义文字字体：
1)先在画图工具中绘制想要的字体，然后保存成ttf格式文件，再到字体转换网址里转换一下再下载下来，再引用字体的css文件
2)转换字体生成兼容代码：http://www.fontsquirrel.com/fontface/generator
例，字体所在文件叫1，字体的css文件：
@font-face{
font-family: ‘miaov‘;
src: url(‘1-webfont.eot‘);
src: url(‘1-webfont.eot?#iefix‘) format(‘embedded-opentype‘),
url(‘1-webfont.woff‘) format(‘woff‘),
url(‘1-webfont.ttf‘) format(‘truetype‘),
url(‘1-webfont.svg#untitledregular‘) format(‘svg‘);
font-weight: normal;
font-style : normal;
}
3，弹性盒模型：
新增了两个属性：display : box/inline-box
使用弹性盒模型的时候，父元素必须要加display：box或display：inline-box
例：
<style>
.box{height : 200px;border : 10px solid #000; padding : 10px; display : -webkit-box;}//注意加前缀
.box div{width : 100px; height : 100px; background: red; border: 1px solid #fff;}
</style>
<div class="box">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
//若是不加display : box 的话，盒子们就会纵向排列，加了display：box 属性后就会横向排列
box-orient 定义盒模型的布局方向：
horizontal 水平显示
vertical 垂直方向显示
box-direction:定义元素排列顺序，normal和reverse，正序和倒序
box-ordinal-group:设置元素的具体位置
例：
.box div:nth-of-type(1){box-ordinal-group:2;}//有时需要注意加前缀-webkit
.box div:nth-of-type(2){box-ordinal-group:4;}
.box div:nth-of-type(3){box-ordinal-group:1;}
.box div:nth-of-type(4){box-ordinal-group:5;}
.box div:nth-of-type(5){box-ordinal-group:3;}
2）box-flex:定义盒子的弹性空间：
子元素的尺寸=盒子的尺寸*子元素的box-flex的属性值/所有子元素box-flex的属性值的和
.box div:nth-of-type(1){box-flex:1;}//有时要加前缀webkit
.box div:nth-of-type(2){box-flex:2;}
.box div:nth-of-type(3){box-flex:3;}
3）box-pack对盒子富裕的空间进行管理（在水平方向上对元素位置进行管理）
start：所有子元素在盒子左侧显示，富裕空间在右侧
end：所有子元素在盒子右侧显示，富裕控件在左侧
center：所有子元素居中（水平居中，横向）
justify：赋予空间在子元素之间平均分布
4）box-align：在垂直方向上对元素的位置进行管理
start：所有子元素居顶
end：所有子元素居底
center：所有子元素居中（垂直居中，纵向）
4，box-shadow：盒子阴影，也是四个参数，X轴偏移，Y轴偏移，模糊距离，颜色，但是增加了几个可选的样式
box-shadow：[inset] x y blur [spread] color
参数：
----inset :投影方式
1）inset：内投影
2）不给：外投影
---spread：扩展阴影半径（先扩展原有形状(像素为单位)，再开始画阴影）
例：
.box{box-shadow:inset 10px 10px 30px red，20px 20px 20px blue;}//可以叠加
box-reflect:：倒影
1）direction 方向 包括：above|below|left|right;//分别为上下左右
2）距离
3）渐变（可选）
resize：自由缩放
both：水平垂直都可以缩放，但是要加上overflow：auto；
horizontal：只有水平可以缩放
vertical：只有垂直可以缩放
注意：一定要配合overflow：auto一起使用
其他盒模型新增属性
box-sizing:盒模型解析模式：
content-box：标准盒模型
width/height=border+padding+content
border-box ：怪异盒模型
width/height=content,//去掉border和padding
分栏布局：
column-width：栏目宽度
column-count：栏目列数
column-gap：栏目距离
column-rule：栏目间隔线
分栏有两种方法：
1）指定分栏的宽度即可，浏览器便自行分栏了
2）指定分栏的列数即可，
响应式布局：
1)横屏时：
<link rel="stylesheet" media="all and (orientation:portrait)" href="http://www.mamicode.com/portrait.css">//portrait代表竖屏，portrait.css是竖屏时的样式
2)竖屏时：
<link rel="stylesheet" media="all and (orientation.landscape)"href="http://www.mamicode.com/landscape.css">//landscape代表横屏，landscape.css代表横屏时的样式
或者是直接在style样式里控制响应式布局
@media screen and (min-width:400px) and (max-width:500px) { //此处写样式} //括号外边是限制条件
3）有时也需要 在style里引入外部文件：
@import url("外部文件位置") screen and (min-width:400px) and (max-width:800px)//宽度这样的限制条件及外部文件位置需要自己设置，
例：<link rel=“stylesheet”type="text/css" href="http://www.mamicode.com/styleA.css" media="screen and (min-width:600px) and (max-width:800px)">//代表宽度在600-800之间时的样式
<link rel=“stylesheet”type="text/css" href="http://www.mamicode.com/styleB.css" media="screen and (min-width:800px) and (max-width:800px)">//代表宽度在800以上之间时的样式
<link rel=“stylesheet”type="text/css" href="http://www.mamicode.com/styleC.css" media="screen and (max-width:600px)">//代表宽度在600以下之间时的样式
1，圆角：
一个值的情况：代表四个角，都一样
两个值的情况：对角，前边的代表左上角和右下角，后边的代表右上角和左下角。
border-radius：20px 40px;
三个值的情况：左上角，右上角和左下角，右下角
border-radius:20px 40px 60px;
四个值的情况：顺时针，
椭圆的情况：
1）border-radius：100px/150px；x轴半径/y轴半径，斜线前边代表（水平）x轴半径，后边代表（垂直）y轴半径
不给斜线，则水平垂直一样
参数：各种长度单位都可以：px,%；%有时很方便
2）border-radius:20px 40px 60px 80px/10px 20px 30px 40px;斜线前边代表4个角的x轴半径，后边代表4个角的y轴半径
3）border-radius：50%//是一个椭圆
box-sizing:border-box；//???????????????
2，边框
边框图片border-image
border-image-sourceg ：引入图片
border-image-slice：切割图片 如：27 27 ，并且不加单位，切割后悔根据边框大小自动缩放
border-image-width：边框宽度
border-image-repeat：图片的排列方式，round平铺，repeat重复，stretch拉伸，round和repeat的效果一样
Chrome浏览器会将中间空的地方填充,只要在前面加上前缀-webkit即可：-webkit-border-image:url(border.png) 27 27 round round;
边框颜色：border-colors，注意colors有个s,
border-left-colors:red blue yellow;//注意colors有个s,此处样式是左边框由外到内三种颜色，这种多边框颜色值在火狐下实现了
线性渐变格式：
linear-gradient：起点，起始样式 ，结束样式；
只能用在背景上，
IE上兼容渐变的方法：
filter：progid:DXImageTransform.Microsoft.gradient(startColorstr=‘red‘，endColorstr=‘blue‘,GradientType=‘0‘);//0是从上到下，1是从左到右
参数：
--起点：从什么方向开始渐变 默认：top
left， top ，left top
--角度：从什么角度开始渐变
xxx deg的格式
--点：渐变点的颜色和位置
black 50%,位置可选
例：-webkit-linear-gradient(60deg，red 0,blue 50%，green 100%);//开始是红到蓝色，到一半的时候是就蓝色了，到最后变成绿色
渐变实现平铺：repeating-linear-gradient
-webkit-repeating-linear-gradient(60deg,red 0,blue 30px);
加点的位置：
---top，red 40%,green 60%（也可以用px）
---top，red 50%,green 50%
同一个位置两个点-----直接跳变，没有渐变了
配合rgba
---top，rgba(255,255,255,1),rgba(255,255,255,0)//0代表透明（光斑），1代表不透明（原样）
加入背景图片
---background：-webkit-linear-gradient(top，rgba(255,255,255,1)30%，rgba(255,255,255,0))，url(a.gif)
多背景效果：
.box{background:url(b.png) no-repeat，url(a.png) repeat-y right 0;}//写在前边的是在上面的背景，写在后面的就是下面的背景， right 0是紧靠右侧
实现光斑，背景移动：
.box:hover{background-position：300px 0，-100px -100px;}//逗号前边的是上边的图片变化方向，逗号后边的是下边的图片变化方向，x轴方向，y轴方向
h1{display: inline-block;color: rgba(0,0,0,0.5)；background:-webkit-linear-gradient(-30deg,rgba(255,255,255,0) 100px,rgba(255,255,255,1) 120px,rgba(255,255,255,1) 140px,rgba(255,255,255,0) 160px) no-repeat -200px 0;-webkit-bakcground-clip:text;/*只在文字上显示光斑*/
transition:8s;} //或者是不在此处加时间和hover动作，而是在JS中使用定时器
body:hover h1{background-position: 500px 0;}
径向渐变：，
radial-gradient（[起点]？[形状||大小]？<点>,<点>）；
起点：可以是关键字（left，top，right，bottom）具体数值或百分比
形状：ellipsis（椭圆），circle
大小：具体数值或百分比，也可以是关键字（最近端，最近角，最远端，最远角，包含或覆盖（closest-side,closest-corner,farthest-side,farthest-corner,contain or cover））;
-注意firefox目前只支持关键字
背景：
多背景：
---逗号分开，：
----background：url（a.jpg）0 0，url(b.jpg) 0 100%;
背景尺寸：
background-size:x y
--background-size:100% 100%//正好填充满边框大小
--Cover 放大（覆盖）
--Contain 缩小（包含）
若是有两张图的情况下：
background-size:contain，100px 100px;//前边是第一张图大小设置，后边是第二张图大小设置
background-origin：border|padding|content
border-box:从border区域开始显示背景
padding-box:从padding区域开始显示背景
content-box:从content区域开始显示背景
background-clip：
border:从border区域向外裁剪背景
padding：从padding区域向外裁剪背景
content：从content区域向外裁剪背景
no-clip:从border区域向外裁剪背景
webkit内核新增属性：text
-webkit-background-clip:text;//只在文字形状上面显示背景
遮罩：只在webkit内核下实现了
Mask-image:图片来源
Mask-position：位置
Mask-repeat：平铺方式，如no-repeat
-webkit-mask:url(mask.png) no-repeat right 0;//mask.png为表示遮罩尺寸的图片（可以是自己在PS上画的）,位置在最右边
2D转换：
rotate：旋转，单位是角度,-webkit-transform:rotate();
skew：倾斜，单位也是角度
例：倾斜的导航链接菜单，但是文字不能倾斜
ul{margin : 0; padding : 0;list-style : none;}
li{float : left; width : 100px; text-align : center; height : 30px; border : 1px solid #fff; background : red; font : 12px/30px "宋体"; -webkit-transform : skewX(30deg);}//此时背景连带文字都倾斜了
a{text-decoration : none ; -webkit-transform : skewX(-30deg); display : block;}//将链接再倾斜回来30度即可保证文字不倾斜了
scale：缩放，两个参数下，X，Y，scale（num）,将原始图形X方向和Y方向同时放大或缩小num倍，num小于1即为缩小，大于1即为扩大，scaleX（），scaleY（）为将X方向和Y方向分别放大和缩小
-webkit-transform：scale（）；scaleX（）；scaleY（）；
translate（）位移函数
translateX（）：-webkit-transform：translateX（）；
translateY（）：-webkit-transform：translateY（）；
transform：translate（）；
变换基点：
-webkit-transform-origin:关键字可以是left ,right,right top(右上角) ,right bottom（右下角）,也可以是数值如：200px 200px
例：可以绕右下角边旋转，边缩放，
.box:hover{-webkit-transform:rotate(360deg) scale(0.2);}
transform:执行顺序问题-----后写的先执行
例如：
.box1{-webkit-transform : translateX(100px) scale(0.5);}//先缩小一半再向前移动100px
.box2{-webkit-transform : scale(0.5) translateX(100px);}//先移动100px 再缩小一半，100px也会被缩小一半，实际只移动50px,会比box1移动距离小
过度事件：transition
.box{width : 100px; height : 100px;background : red; transition : 1s;}
.box : hover{background : blue; width : 200px; height : 200px;}
transition : 必要的一个参数就是过度时间，此外在后面可以添加可选参数（需要过度的属性，如宽度）
transition : 1s width；
还可以加可选参数：(transition-timing-function)运动形式：逐渐变慢（ease）默认值，匀速（linear），加速(ease-in)，减速（ease-out），先加后减(ease-in-out)
transition : 1s width ease；
另外的可选参数：贝塞尔曲线cubic-bezier(x1,y1,x2,y2)
http://matthewlein.com/ceaser/
注意：多种样式都需要过度，但过度时间不一样，用逗号分隔
.box{width : 100px; height : 100px;background : red; transition : 1s width , 2s height , 3s background;}
.box : hover{background : blue; width : 300px; height : 200px;}
另外的可选参数就是延迟：该参数放在过渡时间后面
.box{width : 100px; height : 100px;background : red; transition : 1s 2s width , 2s 3s height , }
过度完成事件：
1）webkit内核：
obj.addEventListener(‘webkitTransitionEnd‘ , function(){} , false);
2）firefox:
obj.addEventListener(‘transitionEnd‘ , function(){} , false);
例：
var oBox=document.getElementById("box");
oBox.onclick=function(){
this.style.width=this.offsetWidth+100+"px";//将当前宽度增加100px;
this.style.height=this.offsetHeight+100+"px";
}
addEnd(oBox , function(){
this.style.width=this.offsetWidth+100+"px";//会出现宽度一直增加不会停的问题
});
function addEnd(obj , fn){
obj.addEventListener(‘WebkitTransitionEnd‘ , fn , faslse);
obj.addEventListener(‘transitionEnd‘ , fn , false);
}
注意：上例中直接添加addEnd()方法增加宽度时会出现宽度一直增加停不下来的问题，因此要增加removeEnd()方法
function removeEnd(obj,fn){
obj.removeEventListener(‘WebkitTransitionEnd‘ , fn ,false);
obj.removeEventLIstener(‘transitionEnd‘ , fn ,false);
}
并且将宽度增加的方法重新命名：
function end（）{
this.style.width=this.offsetWidth+100+"px";
removeEnd(this , end); //并且要增加这一句，先改变样式，再取消事件
}
然后调用addEnd(obj , end);
注意：有时script脚本需要写在body里面，因为若是直接写在head里面，浏览器可能找不到脚本里的相关元素而报错（某些元素为空）
6，有时候，元素执行完动作后立即变回原样，是因为添加了end事件：
addEnd(obj , fn);
removeEnd(obj , fn);
3D转换：
首先要加这句：
-webkit-transform-style：preserve-3d；//代表是3d空间
还要加景深：-webkit-perspective:100px; //翻转时会呈现近大远小，代表站在100个元素之外看它
perspective-origin：景深基点(视线是从哪个方向看的)，如left bottom
translate-Z：沿着Z轴平移，-webkit-transform：translateZ（-100px）；//向前平移
旋转幻灯片：
动画：
animation:与以往不同，写法加上keyframes（关键帧）并且调用时要加浏览器的前缀-webkit,-moz,-ms,-o,参数还有动画时长，最后再加一个标准的不带前缀的调用；可选参数还有运动形式（linear ，ease，ease-in，ease-out），运动形式名写在关键帧名后边，可选参数延迟时间写在正常动画时长后边；可选参数重复次数写在运动形式后边（infinite为无限次），
让动画暂停：-webkit-animation-play-state : paused; //默认是running播放
@-webkit-keyframes move{ //move为自定义的关键帧 的名字
0% {
width : 1000px; //不写0%也可以，就是直接从style中的已规定样式开始
}
100%{
width:500px;
}
}
.box{-moz-animation : 2s move; animation : 2s move; }
播放前重置：animation-direction：normal和alternate
normal：动画第二次直接跳到0%的状态开始执行
alternate：动画直接从上一次停止的位置开始执行
想让动画执行到某种程度后结束的位置可以使用添加class的方法：
.box{width:100px; height:100px; background:red;}
.move{-webkit-animation:2s move; width:500px;}
<script>
document.getElementById("oBox").onclick=function()
{ this.className="box move";
}
</script>
transition有事件:transitionEnd;
animation也有结束结束事件animationEnd
function addEnd(obj , fn){
obj.addEventListener(‘webkitAnimationEnd‘ , function(){} , false);
obj.addEventListener(‘animationEnd‘ , function(){} , false);
}
幻灯片实例中：层级的使用？？？Z-index
z-index:代表元素的堆叠顺序，属性值为number或是inherit（和父元素相同）或者是auto（默认），
使用javascript的语法：obj.style.zIndex="1";
number：可为正，可为负，正为离用户越近，负为离用户越远
text-indent:缩进元素的首行
CSS3 学习小结