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"。
CSS3 转换
通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释:Internet Explorer 9 需要前缀 -ms-。
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 允许你改变被转换元素的位置。
matrix(n,n,n,n,n,n) | 定义 2D 转换,使用六个值的矩阵。 |
translate(x,y) | 定义 2D 转换,沿着 X 和 Y 轴移动元素。 |
translateX(n) | 定义 2D 转换,沿着 X 轴移动元素。 |
translateY(n) | 定义 2D 转换,沿着 Y 轴移动元素。 |
scale(x,y) | 定义 2D 缩放转换,改变元素的宽度和高度。 |
scaleX(n) | 定义 2D 缩放转换,改变元素的宽度。 |
scaleY(n) | 定义 2D 缩放转换,改变元素的高度。 |
rotate(angle) | 定义 2D 旋转,在参数中规定角度。 |
skew(x-angle,y-angle) | 定义 2D 倾斜转换,沿着 X 和 Y 轴。 |
skewX(angle) | 定义 2D 倾斜转换,沿着 X 轴。 |
skewY(angle) | 定义 2D 倾斜转换,沿着 Y 轴。 |
CSS3 3D 转换
Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera 仍然不支持 3D 转换(它只支持 2D 转换)。
transform-style 规定被嵌套元素如何在 3D 空间中显示。
perspective 规定 3D 元素的透视效果。
perspective-origin 规定 3D 元素的底部位置。
backface-visibility 定义元素在不面对屏幕时是否可见。
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 转换元素的透视视图。 |