css3-基础

CSS3 边框

• border-radius
• box-shadow
• border-image

Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。

Firefox、Chrome 以及 Safari 支持所有新的边框属性。

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

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

CSS3 圆角边框

div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}

CSS3 边框阴影

div
{
box-shadow: 10px 10px 5px #888888;
}

CSS3 边框图片

div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

CSS3 背景

• background-size
• background-origin

Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景属性。

CSS3 background-size 属性

div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}

div
{
background:url(bg_flower.gif);
-moz-background-size:40% 100%; /* 老版本的 Firefox */
background-size:40% 100%;
background-repeat:no-repeat;
}

CSS3 background-origin 属性

div
{
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

CSS3 多重背景图片

body
{ 
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}

CSS3 文本效果

• text-shadow
• word-wrap

Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 属性。

所有主流浏览器都支持 word-wrap 属性。

注释：Internet Explorer 9 以及更早的版本，不支持 text-shadow 属性。

您能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：

实例

向标题添加阴影：

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

CSS3 自动换行

单词太长的话就可能无法超出某个区域：

允许对长单词进行拆分，并换行到下一行：

p {word-wrap:break-word;}
hanging-punctuation 规定标点字符是否位于线框之外。
punctuation-trim 规定是否对标点字符进行修剪。
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。
text-outline 规定文本的轮廓。
text-overflow 规定当文本溢出包含元素时发生的事情。
text-shadow 向文本添加阴影。
text-wrap 规定文本的换行规则。
word-break 规定非中日韩文本的换行规则。
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。

CSS3 @font-face 规则

Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。

<style> 
@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Light.ttf‘),
     url(‘Sansation_Light.eot‘); /* IE9+ */
}

div
{
font-family:myFirstFont;
}
</style>

Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。

注释：Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。

使用粗体字体

@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Bold.ttf‘),
     url(‘Sansation_Bold.eot‘); /* IE9+ */
font-weight:bold;
}

文件 "Sansation_Bold.ttf" 是另一个字体文件，它包含了 Sansation 字体的粗体字符。

只要 font-family 为 "myFirstFont" 的文本需要显示为粗体，浏览器就会使用该字体。

font-family name 　　src URL

font-stretch 可选。定义如何拉伸字体。默认是 "normal"。

• normal
• condensed
• ultra-condensed
• extra-condensed
• semi-condensed
• expanded
• semi-expanded
• extra-expanded
• ultra-expanded

font-style 可选。定义字体的样式。默认是 "normal"。

• ormal，italic，oblique

font-weight 可选。定义字体的粗细。默认是 "normal"。

• normal，bold
• 100，200，300，400，500，600，700，800，900

unicode-range unicode-range 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);		/* IE 9 */
-webkit-transform: rotate(30deg);	/* Safari and Chrome */
-o-transform: rotate(30deg);		/* Opera */
-moz-transform: rotate(30deg);		/* Firefox */
}

元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);		/* IE 9 */
-webkit-transform: translate(50px,100px);	/* Safari and Chrome */
-o-transform: translate(50px,100px);		/* Opera */
-moz-transform: translate(50px,100px);		/* Firefox */
}

div
{
transform: scale(2,4);
-ms-transform: scale(2,4);	/* IE 9 */
-webkit-transform: scale(2,4);	/* Safari 和 Chrome */
-o-transform: scale(2,4);	/* Opera */
-moz-transform: scale(2,4);	/* Firefox */
}

scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);	/* IE 9 */
-webkit-transform: skew(30deg,20deg);	/* Safari and Chrome */
-o-transform: skew(30deg,20deg);	/* Opera */
-moz-transform: skew(30deg,20deg);	/* Firefox */
}

matrix() 方法

matrix() 方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

实例

如何使用 matrix 方法将 div 元素旋转 30 度：

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);		/* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);		/* Opera */
}

transform 向元素应用 2D 或 3D 转换。

transform-origin 允许你改变被转换元素的位置。

 CSS3 3D 转换

Internet Explorer 10 和 Firefox 支持 3D 转换。

Chrome 和 Safari 需要前缀 -webkit-。

Opera 仍然不支持 3D 转换（它只支持 2D 转换）。

transform-style 规定被嵌套元素如何在 3D 空间中显示。

perspective 规定 3D 元素的透视效果。

perspective-origin 规定 3D 元素的底部位置。

backface-visibility 定义元素在不面对屏幕时是否可见。

css3-基础,古老的榕树,5-wow.com