CSS3主要知识点总结+HTML5新标签(图文版)分析

总结+HTML5新增标签
目录：
1
2
3
4
5
6
7
8
分享2014-4-1 HTML5上课笔记
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.距离
★4）CSS3变形transform
二，三维变形的变形方式：四种方法
旋转：-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轴(垂直方向)缩放元素。