css3总结

　　1、显示属性，自身属性，文本属性

　　

　　推荐样式编写顺序

　　     1显示属性 ：display，list-style，position，float，clear [注意按照横着的顺序]

　　    2自身属性（合模型）：width，height，margin，padding，border，background（第3点）

　　     3背景：background

　　     4行高：line-height

　　     5文本属性：color,font，text-decoration，text-align，vertical-align，white-space，content

　　     6其他 cursor/z-index/zoom

　　     7 css3属性：trandsform/transition/animation/box-shadow/border-radius

　　     8链接的样式请严格按照如下顺序添加：

　　       a:link-->a:visited-->a:hover-->a:active(LoVeHAte)

　　书写的CSS代码的时候请注意按照显示 自身 文本的书写顺序来书写！

　　

　　

　　分享2014-4-1 HTML5上课笔记

　　

　　

　　

　　2、CSS3属性（内核前缀）

　　

　　

　　Mozilla内核   css前缀-moz;

　　

　　WebKit  内核   css前缀-webkit ;（谷歌已换用blink内核）

　　

　　Opera   内核   css前缀-o ;    （欧朋已换用blink内核）

　　

　　Trident内核   css前缀-ms ;

　　

　　

　　CSS3新属性：

　　

　　

　　

　　1）边框

　　

　　① border-colors   相关属性 border-top-colors  border-right-colors  border-bottom-colors  border-left-colors  

　　   

 

　　

　　② border-image  ：

　　

　　stretch拉伸方式来填充边框背景图 |

　　

　　repeat平铺 图片碰到边界时超出截断 |

　　

　　round平铺，图片会工具边框的尺寸动态调整图片大小直至刚 好铺满整个边框

　　

　　   

　　

　　

　　<style>

　　     .wrap {

　　         height: 100px;

　　         width: 100px;

　　         border: 20px solid;

　　         /*border-image: url('border-image.png') 30 30 repeated;简写形式*/

　　         border-image: url('border-image2.png') repeat;

　　         border-image-slice:30 30;

　　         text-align: center;

　　      }

　　  </style>

　　

　　

　　

　　③ border-radius  相关属性  border-radius: 1-4 length | % / 1

　　   border-radius数值为合模型的一半就变成圆 ，记住：不是相对于合模型的width（如：965x1611），

　　

　　    而是整个框才是

　　

　　

　　     <style>

　　           .wrap {

　　                height: 500px;

　　                width: 500px;

　　                border: 50px solid;

　　                border-radius: 250px;

　　           }

　　      </style>

　　

　　

　　

　　结果就显示的不是正圆，所以border-radius: 300px;才能显示正圆，加上border的值

　　

　　        

　　

　　

　　

　　            

　　

　　'/'前面表示水平方向，后面表示垂直方向。每个方向都可以用1~4个值，缩写的规则遵循“左上开始，

　　

　　 顺时针旋转/只能写一个

　　

　　

　　

　　2）阴影

　　

　　

　　

　　1.文本阴影text-shadow（不需要判断浏览器）

　　

　　    

　　text-shadow:2px 3px 2px #000;

　　

　　文字阴影的结构是按照以下顺序：X--偏移，Y--偏移，模糊，和颜色;

　　

　　 text-shadow:-2px -3px 2px rgba(0, 118, 160, .25);

　　 设置为负值，X -偏移阴影转移到左侧。设置为负值偏移Y -转移阴影顶端。颜色可以用RGBA值。

　　

　　 text-shadow:0px 1px 0px #fff,0px -p1x 0px #000；

　　

　　文字阴影的列表（以逗号分隔）,1px的顶部和底部1px的阴影。

　　

　　

　　

　　text-shadow：水平偏移量 垂直偏移量 阴影模糊值 颜色，

　　

　　               水平偏移量 垂直偏移量 阴影模糊值 颜色；（多个阴影用，隔开）

　　

　　eg：

　　

　　.con2 p {

　　     font-size: 90px;

　　     color:#fff;

　　     text-shadow: -1px -1px 1px rgba(0,0,255,1),

　　                  -2px -2px 1px rgba(0,0,254,0.5),

　　                  -6px -6px 10px rgba(0,0,252,0.2);

　　}

　　

　　

　　

　　2.盒阴影box-shadow（不需要判断浏览器）

　　

      阴影不会占据元素范围

　　

　　

　　  盒阴影的使用语法结构与文本阴影类似，如box-shadow: 5px 5px 5px rgba(255,15,255,0.5);

　　

　　  但是，盒阴影多了个属性：外延值，inset，

　　

　　  如box-shadow: 5px 5px 25px rgba(0,0,255,0.5) inset;

　　

　　         

　　

　　        

　　

　　补充个知识点：

　　

　　

　　

　　background:transparent;等价 background:rgba(0,0,0,0);

　　

　　color: transparent;等价 color:rgba(0,0,0,0);

　　

　　

　　

　　

　　3）背景图

　　

　　   

　　

　　 1.CSS3蒙版（需要判断浏览器）

　　

　　    

　　

　　

　　

　　实现上面的效果，需要用到一张蒙版图，注意这张图中间不透明，跟平时PS设计蒙版不一样，

　　

　　不透明的区域显示出来的效果就变为要的效果

　　

　　                

　　

　　代码：

　　     .wrap img{

　　          height: 160px;

　　          width: 160px;

　　          background: #F00;

　　          background: url(teacher_li.jpg);

　　          -webkit-mask-image:url(pro_pho_show_pic.png);

　　          -webkit-mask-position:50% 50%;

　　          -webkit-mask-repeat:no-repeat;

　　     }

　　 缩写：-webkit-mask:url(pro_pho_show_pic.png) 50% 50%  no-repeat;

　　  

　　  -webkit-mask-clip蒙版裁剪位置

　　

　　  -webkit-mask-origin蒙版原点位置

　　

　　  蒙版是能够应用渐变的。但是因为浏览器兼容的问题比较严重，通常不使用渐变作为蒙版的属性值，

　　

　　  而是使用有“透明度梯度”的图片替代掉渐变，产生同样的功能。

　　

　　

　　

　　  2.多重背景 background-image: url(teacher_li.jpg),url(teacher_li.jpg);

　　

　　  

　　

　　 3. CSS3渐变  css3实现背景颜色线性渐变

　　

　　  div{

　　     width:500px;

　　     border:1px solid #FA0;

　　     background:-webkit-linear-gradient(left,#f00,#ff0 25%,#0ff 55%,#00f 70%,#f00);     /*横向渐变*/

　　     background:-webkit-gradient-gradient(left,#f00,#ff0 25%,#0ff 55%,#00f 70%,#f00); /*纵向渐变*/

　　     -webkit-background-clip:text;

　　  /*只有webkit内核支持text的剪切模式*/

　　     color:transparent;

　　   }

　　

　　

　　

　　 4. CSS3倒影 -webkit-box-reflect

　　

　　     1.方向-webkit-box-reflect:  below/above/left/right

　　

　　     2.距离

　　

　　     3.透明度

 

　　

　　

　　

　　    -webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 20%,

　　

　　    rgba(0,0,0,0.6) 100%)

　　

　　

　　

　　

　　

　　

　　

　　★4）CSS3变形transform

　　

　　  二，三维变形的变形方式：四种方法

　　

　　  旋转——缩放——平移——扭曲

　　

　　

　　旋转（1个值） 缩放（1个值） 平移（2个值） 扭曲（2个值）

　　rotate

　　

　　 rotate（30deg）  scale

　　

　　 可以取值正，负，小数translate

　　translate（x,y）   针对2D平面平移

　　

　　

　　 skew

　　   

　　

　　  rotateX(30deg);

　　

　　  rotateY(30deg);

　　

　　  rotateZ(30deg);

　　    缩放的值，X为负时，字体先沿Y轴翻转再缩放

　　   缩放的值，Y为负时，字体先沿X轴翻转再缩放

　　

　　       

　　

　　        translateX   translateY

　　   skew(30deg,15deg);

　　   skewX(30deg);

　　   skewY(15deg);

　　

　　

　　

　　旋转：-webkit-transform: rotate(120deg);

　　

　　平移：-webkit-transform: translate(20px, 10px);  -moz-transform: translateX(20px);

　　

　　缩放：-webkit-transform: scale(1.1,0.5); X方向缩放1.1倍，Y方向缩放0.5倍

　　

　　★① scale(1,1);   ② scale(-1,1);   ③scale(1,-1);  ④scale(-1,-1);等价scale(-1);

　　

　　                                                                     

　　

　　① transform：变形种类；的名称（对应的属性值），多个种类之间使用空格分隔。一个（）中的属性值之间用逗号分隔。

　　

　　② 二维平面的旋转，旋转围绕点进行，而旋转正方向默认为顺时针方向

　　

　　③ 默认的旋转中心就是这个块的正中心，可以通过transform-origin去改变旋转中心，通过left top、数值、百分比改变旋转中心

　　

　　④ scale(<number>[, <number>]);表示使元素在X轴和Y轴同时缩放。<number>表示缩放倍数，可以是正数，负数和小数。负数是先翻转元素然后再缩放。包含两个参数，如果缺少第二个参数，那么第二个参数的值等于第一个参数。

　　

　　   scaleX(<number>):表示只在X轴(水平方向)缩放元素。

　　    scaleY(<number>):表示只在Y轴(垂直方向)缩放元素。

　　    scaleZ(<number>):表示只在Z轴缩放元素。前提是元素本身或者元素的父元素设定了透视值（perspective：100;）

　　

　　

　　5.视角：-webkit-persepective：0；

　　

　　      0没设置 （值）800px;  通常在body元素下

　　

　　  CSS3 perspective属性： 目前浏览器都不支持perspective 属性。Chrome 和Safari 支持替代的-webkit-perspective 属性。

　　

　　

　　

　　6. backface-visibility: visible | hidden;  定义当元素不面向屏幕时是否可见。可用在扑克牌旋转上。

　　

　　

　　

　　

　　

　　【W3CSchool资料】

　　

　　matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)

　　

　　

　　

　　定义3D转换，使用16个值的4x4矩阵。

　　

　　

　　translate3d(x,y,z)

　　

　　定义3D转化。

　　

　　

　　translateX(x)

　　

　　定义3D转化，仅使用用于X轴的值。

　　

　　

　　translateY(y)

　　

　　定义3D转化，仅使用用于Y轴的值。

　　

　　

　　translateZ(z)

　　

　　定义3D转化，仅使用用于Z轴的值。

　　

　　

　　scale3d(x,y,z)

　　

　　定义3D缩放转换。

　　

　　

　　scaleX(x)

　　

　　定义3D缩放转换，通过给定一个X轴的值。

　　

　　

　　scaleY(y)

　　

　　定义3D缩放转换，通过给定一个Y轴的值。

　　

　　

　　scaleZ(z)

　　

　　定义3D缩放转换，通过给定一个Z轴的值。

　　

　　

　　rotate3d(x,y,z,angle)

　　

　　定义3D旋转。

　　

　　

　　rotateX(angle)

　　

　　定义沿X轴的3D旋转。

　　

　　

　　rotateY(angle)

　　

　　定义沿Y轴的3D旋转。

　　

　　

　　rotateZ(angle)

　　

　　定义沿Z轴的3D旋转。

　　

　　

　　perspective(n)

　　

　　定义3D转换元素的透视视图。

　　

　　

　　

　　★ 7）CSS3过渡trabsition

　　

　　

　　

　　参与过渡的属性、过渡时间、过渡方式（动画类型） 延迟时间 【需要写前缀】

　　

　　一般情况下，transition添加在基本效果上，而不是hover效果中。css原状态和hover状态设置为两种不同的样式，然后通过CSS3过渡进行‘渐变’处理padding、color所有浏览器都支持渐变

　　

　　

　　

　　

　　

　　

　　

　　

　　transition属性是一个简写属性，用于设置四个过渡属性：

　　?transition-property  哪个属性实现过渡如：width

　　?transition-duration  完成过渡效果需要多少秒/毫秒

　　?transition-timing-function  速度效果的运动曲线，如linear、ase-in、ease、 ease-out、ease-in-out、 cube-bezier（贝塞尔曲线）

　　?transition-delay  规定过渡开始前等待几秒

　　

　　简写：transition：width 2s ease；

　　

　　

　　

　　★ 8）CSS3动画animation

　　

　　animation基本参数与transition完全相同，第一个参数表示的是调用哪个动画infinite 表示无限循环

　　

　　

　　

　　.wrap {

　　   height:100px;

　　    margin:10px;

　　    -webkit-animation:colorChange 10s linear 1.5s infinite;

　　 }

　　@-webkit-keyframes colorChange {

　　      0%{ background:#f00;}

　　      10%{ background:#ff0;}

　　 }

　　

　　

　　

　　animation属性值：

　　

　　

　　

　　@keyframes

　　

　　规定动画。

　　

　　

　　animation

　　

　　所有动画属性的简写属性，除了animation-play-state属性。

　　

　　

　　animation-name

　　

　　规定 @keyframes 动画的名称。

　　

　　

　　animation-duration

　　

　　规定动画完成一个周期所花费的秒或毫秒。默认是0。

　　

　　

　　animation-timing-function

　　

　　规定动画的速度曲线。默认是"ease"。

　　

　　  

　　规定动画何时开始。默认是0。

　　

　　

　　animation-iteration-count

　　

　　规定动画被播放的次数。默认是1。

　　

　　

　　animation-direction

　　

　　规定动画是否在下一周期逆向地播放。默认是"normal" 。逆向alternate

　　

　　

　　animation-play-state

　　

　　规定动画是否正在运行或暂停。默认是"running"，暂停时pause

　　

　　

　　animation-fill-mode

　　

　　规定对象动画时间之外的状态。

　

　　

　　

　　

　　★CSS3过渡与动画的区别：

　　

　　

　　

　　 transition  animation     

　　

　　1、animation多两个参数，循环和动画的方式

　　

　　2、transition不能自行触发，通过hover等动作或结合JS进行触发。anmiation可以自行运行。

　　

　　3、transition可控性较弱，只能指定起始状态和结束状态，而animation可以定义多个关键帧。

　　

　　4、动画在运行结束之后，需要回到初始状态

　　

　　5、transition的作用，可以用一句话来概括，‘平滑’改变CSS样式

　　

　　

　　

　　

　　9.HTML5新增加标签：

　　

　　

　　优势：① 语义性好 少类名  有利于SEO  代码少

　　

　　      ②  文档易读 、搜索引擎能够更好的理解页面中的内容、作为开发者，能够更快更准确的搜索到信息

　　

　　

　　

　　

　　①<新增标签>

　　

　　article定义文章 代表文档、页面或者应用程序中独立、完整、可以独自被外部引用的内容

　　

　　header定义页眉                    aside定义文章的侧边栏

　　 figure一组媒体对象的以及文字       nav定义导航

　　 figcaption定义figure的标题         section定义文档中的区段

　　 footer定义页脚                     time定义日期和时间

　　 vidio 定义视频                     canvas定义图形，提供画布

　　 audio定义音频                      command表示命令按钮

　　 embed插入各种多媒体                details表示用户要求得到并可以得到的详细信息

　　 mark定义需要突出显示或者高亮的文本 wbr表示软换行

　　 progress显示js中耗费的函数进程     hgroup定义对网页标题的组合　　

　　

　　

　　②新增的input元素类型

　　

　　<email>  输入E-mail地址的文本输入框

　　

　　<url>    输入URL地址

　　

　　<number>输入数值的文本输入框

　　

　　<range>  表示必须输入一定范围内的数字值的文本输入框

　　

　　artical：定义文章 代表文档、页面或者应用程序中独立、完整、可以独自被外部引用的内容

　　

　　section：用于对网站或应用程序中的页面上的内容进行分块，一个section元素通常由内容以及标题组成。但section元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。