css3的学习笔记

本文作者：IMWeb 云师兄 原文出处：IMWeb社区 未经同意，禁止转载

适合初学者以及没看过css3的人快速了解css3的主要内容。

1.opacity ----------------------取值0-1之间，给整个元素和其所有子元素设置透明度级别

2.css选择器----------------------http://www.w3school.com.cn/cssref/css_selectors.asp

                其中li:nth-child(2n+1)表示选择基数个(可以类推)                      input:not([type="submit"])   可以做否定的选择 3.html5兼容浏览器老版本对标签不识别问题

<!--[if Lt IE 9 ] [removed] [removed]

4.文本阴影 text-shadow:1px 1px 1px white; 右偏移，左偏移， 模糊程度（1个PX相当于一个轮廓） ，颜色

5.多出的文本隐藏和显示 overflow:hidden;text-overflow:ellipsis； hover 伪类加上overflow:hidden;text-overflow:ellipsis；text-overflow:inherit; overflow:visible;

6.圆角

border-radius:10px 10px 10px 10px (左上，右上，右下，左下) 可以写一个值，所有角都是统一的，也可以写2个值表示左上，右上以及和他们相对的角，也可写 10px/50px.表示该角按x，y轴的偏移来画弧

7.阴影

box-shadow:0 0 10px #666; 第一个值为x 偏移（可以为负，表示右边）， 第二个值为y偏移（可以为负，表示上边），第三个值为模糊的长度，第四个值为 阴影颜色。

8.渐变

linear-gradient(to right,#ff0000 50%,#007700 50%); 第一个值可以为to right ，to top right ，等线性值。后面的为 渐变的颜色，可以有多个值，可以手动加百分比，，可以自动让其渐变。

repeateing- linear-gradient 为重复渐变 radial-gradient(50% 50%, 60% 60%,rab(75,75,255),rgb(0,0,0) ); 径向渐变，，第一个值为渐变的原点，第二值为渐变的大小位置。渐变可以用rgba的颜色值

9.多重背景

background-image:url(bg_flower.gif),url(bg_flower_2.gif); 可添加多个URL，放置图片

background-size:63px 100px;控制尺寸，可以按像素，可以按比例

background-origin:content-box;可以选择填充范围

10.边框图片 border-image:url(border.png) 30 30 30 30 round; 数字代表图片裁减成边框切片的宽度

动画-------------------------------------------------------------------------------------

11.2D变形 transform

transform:translate(-50%,-50%); 移动 ，当前元素向左移动该元素的一半宽度，和向上移动高度的一半，值可以有正负，可以为像素，可以为百分比（当指定一个值时默认为x）

transform: rotate(15deg); 旋转 ,当前元素顺时针旋转多少度。（默认是按中心点）

附:transform-orgin:top left;设置变形的中心点，可以为px，rem，em，cm等值，也可以百分比，也可以关键词，如center，bottom right等

transform:scale(1.25,0.8); 缩放 ，按比例缩放大小，当为一个值时候，默认x，y都按这比列，也可以单独对x，y设置，scaleX，scaleY

transform:skew(10deg,13deg); 旋转 ,x,和y的值是沿着坐标轴倾斜的度数，可以单独设置skewX,skewY

12.3D变形

transform:translate3D（100px,100px,100px）;X,Y,Z移动；

transform: rotateX(15deg);按X轴旋转，也有rotateY，rotateZ

transform: rotate3D(1，0，1，15deg）；3D旋转，前3个表示立体面中的向量值，然后沿着那个面旋转

transfrom:perspective(200px);透视的值，是按像素值，就是看一个东西的角度，perspective-orgin:center;透视的中心，该值和变形中心一样的取值方法；

transfrom-style:preserver-3d; 多个元素3D变形时候，不会出现信息丢失，遮盖等情况。

backface-visibility:hidden;表示当元素背对我们的时候不显示

13.过度 transition

transition-property:width;过度的属性值，可以为高，宽，甚至可以为transform------必写属性

transition-duration:0.5s; 过度的时间，默认为0------必写属性

transition-timing-function:liear;过度的速率，默认为easy；linear(相同速度),ease(逐渐变慢),ease-in(加速),ease-out(减速),ease-in-out(加速然后减速)

transition-delay:1s;延迟时间

可以简写transition:opactity 3s eas-in 1s,opactity 3s eas-in 1s;多个属性‘，’隔开，属性顺序为，属性值、过度时间、速率、延迟时间，

14.动画 animation

animation-name:cc;名称

animation-duration:1.5s;动画持续时间

animation-iteration-count:infinite;播放次数，默认是1次，无限循环的时候是infinite;

animation-delay:2s; 延迟时间；

animation-timing-functuin:linear;linear(相同速度),ease(逐渐变慢),ease-in(加速),ease-out(减速),ease-in-out(加速然后减速)----和过度是属性是一样的

animation-direction:alternate;播放结束后循环播放的顺序，默认是从头循环，alternate是0%----100%-----0%从头到尾在从尾到头。

animation-fill-mode:none;属性规定动画在播放之前或之后，其动画效果是否可见,forwards:当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

backwards:在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。both:向前和向后填充模式都被应用。

可以简写 animation:cc 1.5s ease-in 3s 25 alternate backwards;多个动画的时候‘，’隔开

布局--------------------------------------------------------------------------------------

15.多栏布局 column

column-count:3; 规定元素应该被分隔的列数。

column-width:200px; 规定元素应该按该宽度去分列数。

column-gap:10px;；栏目之间的间隔距离

column-rule:3px solid #666; 栏目和栏目之间的那个线，属性和border是一样的;

column-fill:balance;填充方式，默认是auto,从左往右一次填充， balance是每个栏目基本内容填充的都差不多

column-span:3;宽栏目设置，可以设置某个在栏目中的元素，所跨的栏目数

16.流动布局 flexbox

display:flex;布局模型设置为flexbox；

flex-flow:row warp;排列方式，row为横向，column为垂直。warp为自动换行。

order:1;控制子元素的排列顺序；( 属性写在子项上)

justify-content:center;子项的内容排列；有，flex-start,flex-end,center,space-between,space-around,

algin-items:center;让子项沿着当前的方向侧轴进行排列，值有。flex-start,flex-end,center，baseline,stretch.(algin-self为子项属性，当用于子项时候，会重写algin-items值)

flex:1 1 200px;（属性写在子项上面）第一个参数是按比例分配父亲元素的剩下份额，第二个是，按比例分配当元素溢出后产生的值。然后子项减去该值。第三个为该元素的值。

17.网格布局 grid

display:grid;布局模型设置为grid的网格

grid-columns:10rem 40rem 30rem；设置3列大小为10rem 40rem 30rem；

grid-rows:1fr 1fr 1fr 1fr;设置为4行，fr为份数，总份数为该值所有加起来；

子元素属性

grid-column:1;子元素选择第几列；

grid-column-span:2;子元素以当前列为启示，选择跨越的列数；

grid-row:2;子元素选着第几行；

grid-row-span:2;子元素选择跨越的的行数，当前行为起始；

18.清除

wrap-flow:both;排除

auto默认值，如果采用该值，周围的文本不再环绕排除项区域，它只会位于排除项元素的低下，就好像排除项不存在一样。

start意味着内容在排除项区域的开始侧环绕，但是在排除项区域的结尾侧保留为空的内容。

end意味着内容在排除项区域的结尾侧环绕，但是在排除项区域的开始侧保留为空的内容。

both意味着内容在排除项开始和结尾（即四周）环绕。

maxinum会让内容向排除项有最大空间的一侧环绕。

clear意味着内容只能在排除项的上下两侧环绕，并且排除区域的左右（开始和结尾）两侧保留为空。

warp-margin:10px；指定其他剩余内容与排除项元素之间的外边距。

warp-padding:10px;指定其他剩余内容与排除项元素之间的内边距。

19.媒体查询

@media all and(min-width:400px)