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 平铺，图片会工具边框的尺寸动态调整图片大小直至刚好铺满整个边框

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

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

结果就显示的不是正圆，所以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.距离