一、选择器
CSS3中新添加了很多选择器，解决了很多之前需要用javascript才能解决的布局问题。
element1~element2: 选择前面有element1元素的每个element2元素。
[attribute^=value]: 选择某元素attribute属性是以value开头的。
[attribute$=value]: 选择某元素attribute属性是以value结尾的。
[attribute*=value]: 选择某元素attribute属性包含value字符串的。
E:first-of-type: 选择属于其父元素的首个E元素的每个E元素。
E:last-of-type: 选择属于其父元素的最后E元素的每个E元素。
E:only-of-type: 选择属于其父元素唯一的E元素的每个E元素。
E:only-child: 选择属于其父元素的唯一子元素的每个E元素。
E:nth-child(n): 选择属于其父元素的第n个子元素的每个E元素。
E:nth-last-child(n): 选择属于其父元素的倒数第n个子元素的每个E元素。
E:nth-of-type(n): 选择属于其父元素第n个E元素的每个E元素。
E:nth-last-of-type(n): 选择属于其父元素倒数第n个E元素的每个E元素。
E:last-child: 选择属于其父元素最后一个子元素每个E元素。
:root: 选择文档的根元素。
E:empty: 选择没有子元素的每个E元素（包括文本节点)。
E:target: 选择当前活动的E元素。
E:enabled: 选择每个启用的E元素。
E:disabled: 选择每个禁用的E元素。
E:checked: 选择每个被选中的E元素。
E:not(selector): 选择非selector元素的每个元素。
E::selection: 选择被用户选取的元素部分。
二、transition
当元素从一种样式变换成另一种样式时 , 为元素添加效果(不用使用Flash动画或JS)
transition.png
三、transform
对元素在2D、3D进行旋转 、 缩放 、 位移 、倾斜等操作
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转换元素定义透视视图。
判断3d旋转方向.png
四、animation
让css可以制作动画
1.@keyframes(重点) 定义动画的名称和动画的内容
2.animation(重点) 以下所有动画属性的简写方式，除了 animation-play-state 属性。
3.animation-name(了解) 引用动画的名称
4.animation-duration(了解) 设置动画持续的时间，单位可以是 s(秒) ms(毫秒)
5.animation-timing-function(了解) 设置动画的运动方式，默认是‘ease‘缓冲运动，还有'linear' 匀速运动
6.animation-delay(了解) 设置动画延迟执行时间，单位可以是 s(秒) ms(毫秒)
7.animation-iteration-count(了解) 设置动画播放的次数，默认是 1，设置无数次用"infinite"
8.animation-direction(了解) 设置动画是否在下一周期逆向返回，默认是 "normal"，不返回，还可以设置"alternate",返回
9.animation-play-state(了解) 设置动画是否正在运行或暂停。默认是 "running",播放，暂停用"paused"
下面这段代码的效果
body{
background-color: #333;
}
.con{
width:380px;
height:270px;
margin:150px auto 0;
}
.con div{
height:200px;
width:24px;
margin:15px;
float: left;
background:#ddd;
border-radius:12px;
}
.con p{
text-align: center;
font-size:18px;
color:#fff;
}
.con .box:nth-child(1){
background-color: #20c070;
animation: jumping 500ms ease 0ms infinite alternate;
}
.con .box:nth-child(2){
background-color: #3090d0;
animation: jumping 500ms ease 100ms infinite alternate;
}
.con .box:nth-child(3){
background-color: #9050b0;
animation: jumping 500ms ease 200ms infinite alternate;
}
.con .box:nth-child(4){
background-color: #e07020;
animation: jumping 500ms ease 300ms infinite alternate;
}
.con .box:nth-child(5){
background-color: #c03020;
animation: jumping 500ms ease 400ms infinite alternate;
}
.con .box:nth-child(6){
background-color: #e04030;
animation: jumping 500ms ease 500ms infinite alternate;
}
.con .box:nth-child(7){
background-color: #e04080;
animation: jumping 500ms ease 600ms infinite alternate;
}
@keyframes jumping{
from{
transform:scale(1,0.3);
}
to{
transform:scale(1,1);
}
}
</style>``
<body>
<div class="con">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<p>LOADING...</p>
</div>
</body>
loading.gif
五、边框
- border-radius可以创建圆角边框
- box-shadow可以为元素添加阴影
- border-image可以使用图片来绘制边框
六、背景
1.background-clip 属性用于确定背景画区 (通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范围)
background-clip: border-box; 背景从border开始显示
background-clip: padding-box; 背景从padding开始显示
background-clip: content-box;背景显content区域开始显示
background-clip: no-clip; 默认属性，等同于border-box
2.background-origin 属性用于确定背景的位置，它通常与background-position一起用 3. background-size 属性常用来调整背景图片的大小，主要用于设定图片本身
4.background-break
七、文字效果
- word-wrap属性允许您允许文本强制文本进行换行，即这意味着会对单词进行拆分
- text-overflow设置或检索当当前行超过指定容器的边界时如何显示
- text-shadow可向文本应用阴影
-
text-decoration对文字的更深层次的渲染，具体有三个属性可供设置：
text-fill-color: 设置文字内部填充颜色
text-stroke-color: 设置文字边界填充颜色
text-stroke-width: 设置文字边界宽度
八、渐变
- linear-gradient(线性渐变)
-
radial-gradient(径向渐变)
线性渐变.png
九、@font-face特性
通过css3 , 可以自由使用任意字体
十、多列布局
- column-count: 规定元素应该被分隔的列数。
- column-gap: 规定列之间的间隔。
- column-rule: 设置列之间的宽度、样式和颜色规则
十一、界面
- resize属性规定是否可由用户调整元素尺寸
- box-sizing 有content-box、border-box和inherit三个值 (这里涉及标准盒模型和怪异盒模型)
- outline-offset属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
欢迎补充!!!~~~
网友评论