首页 > 代码库 > css3学习笔记，随时帮你记起遗忘的css3
css3学习笔记，随时帮你记起遗忘的css3
一，css3基本情况介绍。
顾名思义css3是css2的升级版本，它较以往版本新增了很多强大的功能。目前chrome，safari，firefox
opera，IE10以后都开始支持css3的效果。
1.具体增加的强大功能介绍。
.选择器：以前我们通常用class，id，tagname 来作为html元素的选择器。css3的选择器更强大，他可以减少
标签中的class，id的数量，更方便的维护样式表，更好的实现结构与表现的分离。
.圆角效果：border-radius。
.块阴影和文字阴影：可以对任意div和文字增加投影效果。
.色彩：css3支持更多的颜色和更广泛的颜色定义。新颜色css3支持HSL,CMYK,HSLA,RGBA。
.渐变效果：以前只能用ps做出这种效果就对了。
.个性化字体：@font-face；轻松实现定制字体。
.多背景图：一个元素上增添多张背景图片。
.边框背景图：这个自己体会。
.变形处理：可以对html元素进行需旋转，缩放，移动。和一些以前只能用js实现的效果。
.多栏布局：类似于报纸结构。需要多个div，浏览器解释这个属性并生成多栏结构。
.媒体查询：针对不同屏幕分辨率，应用不同样式。
2.圆角具体使用：border-radius：左上 右上 右下 左下;
3.边框，阴影：
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
inset放在最后会让阴影成为内阴影。只能放在最后。可添加多个阴影，只需用逗号隔开就好。
所谓偏移量：就是你希望阴影处在那方。
4.rgba(color,color,color,透明度);
5.linear-gradient(方向，起始颜色，过渡颜色（多种），结束颜色)。
选择的方向：to (left right bottom top top left top right)
6.text-overflow:clip(直接剪切)|ellipsis（变为省略号） ;
word-wrap:normol(控制连续文本换行)|| break-word；
7.@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。
@font-face {
font-family : 字体名称;
src : 字体文件在服务器上的相对或绝对路径;
}
p {
font-size :12px;
font-family : "My Font";
/*必须项，设置@font-face中font-family同样的值*/
}
8.text-shadow可以用来设置文本的阴影效果。
text-shadow: X-Offset Y-Offset blur color;
X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；
Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；
Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；
Color：是指阴影的颜色，其可以使用rgba色。
9.background-origin ： border-box | padding-box | content-box;
参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。
10.用来将背景图片做适当的裁剪以适应实际需要。
background-clip ： border-box | padding-box | content-box | no-clip
参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。
no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。
11.background-size 设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。
background-size: auto | <长度值> | <百分比> | cover | contain;
1、auto：默认值，不改变背景图片的原始高度和宽度；
2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
12.multiple backgrounds；
多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，
缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），
表明所有背景图片应用该属性值。
background ： [background-color] | [background-image] | [background-position][/background-size] |
[background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat left top /150px 40px,
url(http://static.mukewang.com/static/img/logo_index.png) no-repeat right bottom /200px 20px;
13.三种选择器：E(att^$*="val");E 代表标签，^代表开头匹配，$代表末尾匹配，*代表任意匹配。
14.:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。
15.：not 选择器，除开这个没有这种样式。
16：:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
17：:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子，然后再做分析。
18： “:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。
19.::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。
.clearfix::before,
.clearfix::after {
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
exm：<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>before、after</title>
<style>
.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
.effect{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect::before, .effect::after{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
</style>
</head>
<body>
<div class="box effect">
<h3>Shadow Effect </h3>
</div>
</body>
</html>
20.rotate(角度)。偏转。角度为正时顺时针，为负数时逆时针。具体写法：transfrom: rotate();
21.skew(x,y);也可以只传一个参数，即为单向偏转。
22.scale(x,y);缩放。<1缩小 ，>1放大。
23.translate(x,y); 移动div。
24.matrix(a,b,c,d,e,f);
a为元素的水平伸缩量，1为原始大小；
b为纵向扭曲，0为不变；
c为横向扭曲，0不变；
d为垂直伸缩量，1为原始大小；
e为水平偏移量，0是初始位置；
f为垂直偏移量，0是初始位置;
25.transition-property:通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。
26.transition-duration:这是控制速度的。
27.transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括
ease(由快变慢); linearI(恒速); ease-in(加速);ease-out(减速);ease-in-out(先加再减);
28.transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。
29.Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。
30.animation-delay:控制开始播放时间。
40.animation-iteration-count:设置播放次数。如果取值为infinite，动画将会无限次的播放。
41.animation-direction属性主要用来设置动画播放方向.1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
42.animation-play-state属性主要用来控制元素动画的播放状态。
43.animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。
none
默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
forwards
表示动画在结束后继续应用最后的关键帧的位置
backwards
会在向元素应用动画样式时迅速应用动画的初始帧
both
元素动画同时具有forwards和backwards效果
44.columns:多列布局。columns: 200px 2;分别代表列宽，列数。
45.column-width: column-count: 一个是列宽，一个是列数。
46.CSS3 列间距column-gap；（可用单位px，em）
47.column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。
50.box-sizing: content-box(w3c的计算方法) border-box(ie的计算方法) inherit（父级的计算方法）
51.1. 最大宽度max-width
“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：
@media screen and (max-width:480px){
.ads {
display:none;
}
}
52.自由缩放属性resize resize: none | both | horizontal | vertical | inherit
53.outline(类似于border一样的属性，只是它不占用布局空间，而且形状也不一定是矩形。)
outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit
54.h1:before {
content:"我是被插进来的";
color: red;
}
55.none 定义不进行转换。 测试
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。 测试
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。 测试
translateY(y) 定义转换，只是用 Y 轴的值。 测试
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。 测试
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。 测试
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。 测试
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。 测试
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。 测试
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。 测试
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。 测试
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 测试
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。 测试
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。 测试
perspective(n) 为 3D 转换元素定义透视视图。 测试
css3学习笔记，随时帮你记起遗忘的css3