css3学习

border-radius：

1.border-radius：50px 50px 50px 50px  ，如果width height是100的话，那就是个圆

2.画半圆的方法：width为100px  height：50px  border-radius：50px（左上），0 （右上）,0（右下），50px（左下）就是左半圆，注意宽高。

 border-image:url(图片路径不用引号括起来) 70 70 70 70 /*上右下左 不用px，默认的*/    repeat/round/stretch   /*分别是repeat重复图片到了边角会被切割，round自动重复最后补齐，最后不切割，而是拉伸边缘的小图片，stretch一个图片拉伸到底，border有四个角都默认用一个图片摆斜放在那里。  最后这个repeat这些操作是针对除去四个角意外的操作。

3.颜色扩展

color:rgba(r,g,b,alpha)  rgba(255,255,255,0.5)就是透明度为50%的白色，方便了不少呢

4.渐变颜色

1.线性渐变 linear-gradient 2.径向渐变  radial-gradient    放在background-image里面   background-image:linear-gradient(to bottom/to top left/*向左上角*/,起始颜色，终点颜色，可以多写几个颜色就是多色渐变)   只能放在background background-image 的属性里面 color border不能起作用。

5.要想让文本一行显示用white-space：nowrap；overflow：hidden；溢出隐藏    显示省略号操作： text-overflow:ellipsis; 　　or  ellipsis改成clip 剪切，跟不设置有什么区别...

6.@font-face能够加载服务端的字体文件，让客户端显示没有安装的字体   要再用这个特定的字体之前必须获取字体并设定名字：

@font-face{  font-family:字体名字  ；  src：字体在服务器上面的的地址    }  后面就可以直接用了

7.边框阴影出来还不算，连文字阴影都出来了  text-shadow：x-offset， y-offset，blur（模糊程度）， 颜色。  跟边框阴影差不多

 8.背景图片也来一脚：background-origin：border-box|padding-box|context-box     默认背景图是从边框内部开始，被border包在里面， border-box 不被包了，连边框都被穿过，边框也能看到图片的那种，同理，padding-box  图片从padding里面开始，  content-box是 从内容开始。要注意的是：这个属性的前提是在background-repeat为none的时候才能发挥

9.background-clip:参数跟origin一样，多了个多于的no-clip，这不是多余吗（手动捂脸）。这个参数设置图片从哪个地方 开始剪切，border-box开始几乎没变化，除非你的图片溢出border外那没话说，就从border外线开始剪切就对了啦。 padding就把border那个区域的图片呀切掉，同理不说了

10.设置背景图片的缩放===background-size:auto（默认大小）| cover（覆盖整个容器为止）| contain（直到有一条边勾搭到容器的一遍为止，另一边没关系）|  设置100px  50px   (会挤压图片变形，如果只设置一个值，另一边等比缩放)|  百分比缩放  100%  100%，与设置一个值的话与px一样。

 11.multple background---background：url(http://static.mukewang.com/static/img/logo_index.png) no-repeat bottom right/50px #000 ;

如果要设置size要放在position之后并且用/隔开

设置color只能设置一种

*。。。。。拓展：：：伪类元素

：：before  和：：after      css3要两个双引号          .class ::before  {  content:" ";  }在class“前面”插入内容content里面可以放字符串 “阿达”，可以放url（路径），图片路径就可以显示图片了，还可以显示一个本元素的属性content：“（”attr（href）“）”；就可以把图片路径显示出来。 　　

12.属性选择器

居然可以匹配字符串了。。。    a[class^=box]|[class*=box]|[class$=box]  分别是匹配类名中的开头匹配；中间随意匹配，匹配到就行；和结尾匹配。 href   title这些属性一样。

:not([属性=“”])可以排除不要选这个。

13.空内容选择器   p：empty{ }     内容为空选择器

14.target选择器   a标签放在一个id是div的div里面 ，a的href设置成“#div”点击a就跳到这个div并且设置css  #div：target{} 或者div里面其他子元素#div：target p{}都可以设置跳转后的效果了。   

15.nth-child(odd|even)   奇数偶数选择

16.:first-of-type{}  来获取第一个类型为这个type 的子元素  比如   .wrapper div:first-of-type{}

17.:nth-of-type(odd|2n-1){}  奇数

18.如果你是独生元素 那就用   ：only-child来获取把

19. 如果你父级生了很多，你不是独生，但是你是男的，其他都是妹妹姐姐，那你就可以用   ：only-of-type  来获取

20.:enabled    :disabled   表单中可用和不可用的状态选择

21.::selection{}  可以设置在网页中的文字被选中部分的效果

22.:read-only  具有只读属性的表单元素，好像只有表单元素有用

23.:read-only 非只读状态的选择

 

 

   css 变形与动画

transform：rotate（45deg）；

 transform: skew(x,y);  x是水平偏移，正负对应左右的方向，大小用deg度量衡，y同理，正负对应上下。

transform:scale(x,y)   ;    x是水平，y是垂直方向，值为0-1之间的数，如果只有有一个值的话，等比例。 scale（0.8） 缩小成80%。

transform：translate（x，y）； 瞬间移动。

transform:matrix(scaleX(),skewY()，skewX(),scaleY,translateX(),translateY())   matrix(1,0,0,1,50,50)

transform-origin:left top  ;   把原点放到了左上角，会影响以上所有变形转换的操作。 取值跟background-position的取值是一样的

 

￥￥ 偶然看到了个挺有用的东西，顺便记录下来  box-sizing:border-box|padding-box|content-box      border-box是把border和padding算进width，  padding-box你懂了

 

等到了好东西

tansition-property：all|width|height很多很多  这是入口，想要有特效变化的值的入口。

tansition-timing-function：过度函数//ease-in；慢速开始，ease-out：慢速结束  ；ease：慢速开始加速再慢速结束  跟ease-in-out：感觉差不多，慢速开始，慢速结束。linear就是直线运动匀速了。    注意：timing后面还有-function

tansition-delay：1；秒数为单位，延迟

tansition-duration：过度动画秒数。

l把上面的连起来写  transition: all 0.5s ease-in 0.2s;

在一个元素上绑定以上的属性，这个元素的如果property变化的话，就会执行以上的变化特效。

 

牛逼的东西又来了

@keyframes 动画名{from{}    to{}   }   这是两个变化的写法，还有多变的    @keyframes  动画名{0%{}  50%{}  100%{}  }  牛逼不    定义这个动作之后要在想执行的元素里面加上animate属性。

div{ animation：动画名  5s  ease-in  2s infinite normal|alternate(反方向再来一次)}   后面这个是duration 和timing-function 和delay的定义，跟上面transition差不多。  记住是animation 不会死animate

、、、只是transition没有infinite循环

、、、animation拆开写法跟transition差不多  但是infinite 写法是 animation-iteraction-count：2 ，是次数   或者infinite 无限循环。

、、、如果不设置animation-duration属性动画不会进行。

设置让动画暂停的属性：animation-play-state：running|paused       跑起来或者暂停   可以用来做游戏

animation-fill-mode:播放模式     none 是正常播放也就是  初始状态-第一帧-最后一帧-初始状态       forwards是初始状态-第一帧-最后一帧    backwards是第一帧开始最后再初始状态      both 是  从第一帧播放到最后一帧，不显示初始状态。

 

box-sizing：content-box（padding和border算在width和height以外）    border-box（把padding和border算进width和height）