CSS3笔录

今天开始总结CSS3，很多东西在CSS笔录里都介绍过，所以这里做下精简即可，具体内容如下

 

【目录】

CSS3 被划分为模块，其中最重要的 CSS3 模块包括：

选择器，框模型，背景和边框，文本效果，2D/3D 转换，动画，多列布局，用户界面

下面来依次介绍

 

【详解】

（一）CSS3边框

边框属性：border-radius，box-shadow，border-image

①border-radius，box-shadow：

【兼容】

IE9+ 支持 border-radius 和 box-shadow 属性，Firefox、Chrome 以及 Safari 支持所有新的边框属性；

对于 border-image，Safari 5 以及更老的版本需要前缀 -webkit-；

Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-；

关于IE兼容CSS3的方案，我在之前文章http://570109268.iteye.com/blog/2407664里做过总结

【注意】

对于兼容IE写法有许多不足之处，.htc文件引入可以解决许多CSS3问题，例如边框阴影。但是无法调整颜色及无法设置内外阴影效果；

还有另外的一种针对IE的写法:

filter: progid（进程id）:DXImageTransform（DX图像转变）.Microsoft（微软）.Shadow（阴影）
(color='#969696', Direction=135阴影角度, Strength=5阴影半径);/*for ie6,7,8*/ 

缺点很明显，就是无法单独设置某边的阴影及无法设置内外阴影效果；

②border-image：

【兼容】

IE11+，Firefox，Opera 15， Chrome 以及 Safari 6 支持 border-image 属性

Safari 5 支持替代的 -webkit-border-image 属性

【内容】

border-image 属性是一个简写属性，用于设置以下属性：

border-image-source路径，border-image-slice向内偏移，border-image-width宽度，

border-image-outset边框图像区域超出边框的量，border-image-repeat平铺(repeated)、铺满(rounded)或拉伸(stretched)

 

（二）背景

背景属性background-size，background-origin等

①background-origin背景起源

【兼容】IE9+及其他主流浏览器均支持

规定背景图片的定位区域，背景图片可以放置于 content-box、padding-box 或 border-box 区域

②background-clip背景修剪

【兼容】IE8+及其他主流浏览器均支持

规定背景的绘制区域，属性值：

border-box 背景被裁剪到边框盒

padding-box 背景被裁剪到内边距框

content-box 背景被裁剪到内容框

③background-size背景尺寸

规定背景图像的尺寸，语法：

background-size: length（具体像素级宽高）|percentage（百分比设置宽高）|

cover（扩展覆盖，但显示不全）|contain（扩展到刚好适合内容区域）;

 

（三）文本效果

文本属性text-shadow，word-wrap

【兼容】

IE10+及其他主流浏览器均支持

①text-shadow 文本阴影效果

②word-wrap 强制文本进行换行 - 即使这意味着会对单词进行拆分

③word-break 规定自动换行的处理方法，可以让浏览器实现在任意位置的换行

④text-overflow 规定当文本溢出包含元素时发生的事情

text-overflow: clip（修剪文本）|ellipsis（省略号）|string（给定字符替代）;

 

（四）字体

 @font-face 规则

【兼容】

IE8+及其他主流浏览器均兼容

【语法】

在新的 @font-face 规则中，首先定义字体的名称（比如 myFirstFont），然后指向该字体文件

例如，为 HTML 元素使用字体先通过 font-family 属性来引用字体的名称 (myFirstFont)

<style type="text/css"> 
@font-face{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}
div{
font-family:myFirstFont;
}
</style>

 在 @font-face 规则中定义的所有字体描述符：

font-family	name	必需。规定字体的名称。
src	URL	必需。定义字体文件的 URL。
font-stretch	normal	可选。定义如何拉伸字体。默认是 "normal"。
font-style	ormal italic oblique	可选。定义字体的样式。默认是 "normal"。
font-weight	normal bold 100-900	可选。定义字体的粗细。默认是 "normal"。
unicode-range字符编码	unicode-range	可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

 

 （五）2D转换transform

 通过 CSS3 转换，能够对元素进行移动、缩放、转动、拉长或拉伸。

【兼容】

IE9 需要前缀 -ms-，Chrome 和 Safari 需要前缀 -webkit-，IE10+、Firefox 以及 Opera 支持 transform 属性

【 2D 转换方法】

translate移动，rotate旋转，scale缩放，skew倾斜，matrix矩阵变换

以上除了矩阵变换matrix()，其他属性我之前都做过总结

关于矩阵变换我在后面文章http://570109268.iteye.com/admin/blogs/2410928里做介绍

【转换属性】

transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。

 

 （六）3D 转换

3D 转换方法：rotateX()，rotateY()

【兼容】

 IE10和Firefox支持3D转换，Chrome和Safari需要前缀-webkit-，Opera仍然不支持 3D 转换（它只支持 2D 转换）

①rotateX() 方法

元素围绕其 X 轴以给定的度数进行旋转

②rotateY() 旋转

元素围绕其 Y 轴以给定的度数进行旋转

转换属性：

transform	向元素应用 2D 或 3D 转换
transform-origin	允许你改变被转换元素的位置
transform-style	规定被嵌套元素如何在 3D 空间中显示
perspective	规定 3D 元素的透视效果
perspective-origin	规定 3D 元素的底部位置
backface-visibility	定义元素在不面对屏幕时是否可见

 

 （七）CSS3过渡

【兼容】

IE10+、Firefox、Chrome 以及 Opera 支持 transition 属性，Safari 需要前缀 -webkit-，Chrome 25 以及更早的版本，需要前缀 -webkit-

【注意】如果时长未规定，则不会有过渡效果，因为默认值是 0

【应用】

多项改变：如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开

div{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

 

（八）动画

创建动画需要@keyframes 规则，在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果

【兼容】

IE10+、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性，Chrome 和 Safari 需要前缀 -webkit-

【内容】 

一般用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%

0% 是动画的开始，100% 是动画的完成

为了得到最佳的浏览器支持，推荐始终定义 0% 和 100% 选择器

 

 （九）多列（像报纸排版）

多列属性：column-count列数，column-gap间隙，column-rule规则

【兼容】

IE10+和Opera支持多列属性，Firefox 需要前缀 -moz-，Chrome 和 Safari 需要前缀 -webkit-

【内容】

①column-count列数

规定元素应该被分隔的列数，例如把 div 元素中的文本分隔为三列：

div{
-moz-column-count:3; 	/* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}

 ②column-gap列隙

规定列之间的间隔，例如规定列之间 40 像素的间隔：

<style type="text/css"> 
.newspaper{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:30px; /* Firefox */
-webkit-column-gap:30px; /* Safari and Chrome */
column-gap:30px;
}
</style>

 ③column-rule列规则

设置列之间的宽度、样式和颜色规则，例如规定列之间的宽度、样式和颜色规则：

div{
-moz-column-rule:3px outset #ff0000;	/* Firefox */
-webkit-column-rule:3px outset #ff0000;	/* Safari and Chrome */
column-rule:3px outset #ff0000;
}

column-count	规定元素应该被分隔的列数。
column-fill	规定如何填充列。
column-gap	规定列之间的间隔。
column-rule	设置所有 column-rule-* 属性的简写属性。
column-rule-color	规定列之间规则的颜色。
column-rule-style	规定列之间规则的样式。
column-rule-width	规定列之间规则的宽度。
column-span	规定元素应该横跨的列数。
column-width	规定列的宽度。
columns	规定设置 column-width 和 column-count 的简写属性。

 

 

（十）用户界面

在 CSS3 中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。

用户界面属性：resize，box-sizing，outline-offset轮廓偏移

 【兼容】

①resize调整属性：除IE和Opera外，其他浏览器均兼容

②box-sizing主流浏览器均兼容，火狐需要加hack写法-moz-box-sizing

③outline-offset轮廓偏移，除IE外，其他浏览器均兼容

 

 

【拓展】

①.htc

IE利用VML矢量可标记语言作为画笔绘出圆角：下载一个压缩包ie-css3.htc，里面有一个微软的脚本文件（11KB）和一个用来测试服务器是否有正确的Content-Type的 HTML文件，.htc 文件是IE内核支持Web行为后用来描述此类行为的脚本文件。它们定义了一套方法和属性，程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去

②自动换行 word-break:break-all和word-wrap:break-word区别

       word-break:break-all

       例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。

       word-wrap:break-word

      例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

 

 

 

 

 

 

.