CSS3 1 边框-背景-文本-字体
1 CSS3 边框
通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 - 并且不需使用设计软件，比如 PhotoShop。
新的边框属性：
border-radius
box-shadow
border-image
①浏览器支持
Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。
Firefox、Chrome 以及 Safari 支持所有新的边框属性。
注1：对于 border-image，Safari 5 以及更老的版本需要前缀 -webkit-。
注2：Opera 支持border-radius和box-shadow属性，但是对于 border-image 需要前缀 -o-。
②border-radius 属性用于创建圆角
取值：px/em/%
div {
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}
③box-shadow 用于向方框添加阴影
语法
box-shadow: h-shadow v-shadow blur spread color inset;
|
值 |
描述 |
|
h-shadow |
必需。水平阴影的位置。允许负值。 |
|
v-shadow |
必需。垂直阴影的位置。允许负值。 |
|
blur |
可选。模糊距离。 |
|
spread |
可选。阴影的尺寸。 |
|
color |
可选。阴影的颜色。请参阅 CSS 颜色值。 |
|
inset |
可选。将外部阴影 (outset) 改为内部阴影。 |
div {
box-shadow: 10px 10px 5px #888888;
}
④ border-image 属性，使用图片来创建边框
border-image 属性允许您规定用于边框的图片！
border-image 属性是一个简写属性，用于设置以下属性：
|
描述 |
测试 |
|
border-image-source |
用在边框的图片的路径。 |
|
border-image-slice |
图片边框向内偏移。 |
|
border-image-width |
图片边框的宽度。 |
|
border-image-outset |
边框图像区域超出边框的量。 |
|
border-image-repeat |
图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 |
2 CSS3 背景
CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制。
background-size
background-origin
①浏览器支持
Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景属性。
②background-size 属性，规定背景图片的尺寸。
在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。
background-size: length|percentage|cover|contain;
|
值 |
描述 |
|
length |
设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。 |
|
percentage |
以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。 |
|
cover |
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。 |
|
contain |
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
③background-origin 属性
background-origin 属性规定背景图片的定位区域。
background-origin: padding-box|border-box|content-box;
|
值 |
描述 |
|
padding-box |
背景图像相对于内边距框来定位。 |
|
border-box |
背景图像相对于边框盒来定位。 |
|
content-box |
背景图像相对于内容框来定位。 |
④background-clip 属性，规定背景的绘制区域：
background-clip: border-box|padding-box|content-box;
|
值 |
描述 |
|
border-box |
背景被裁剪到边框盒。 |
|
padding-box |
背景被裁剪到内边距框。 |
|
content-box |
背景被裁剪到内容框。 |
⑤多重背景图片
CSS3 允许您为元素使用多个背景图像。
body {
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}
3 CSS3 文本效果
CSS3 包含多个新的文本特性。
text-shadow
word-wrap
①浏览器支持
Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 属性。
所有主流浏览器都支持 word-wrap 属性。
注释：Internet Explorer 9 以及更早的版本，不支持 text-shadow 属性。
②text-shadow 属性向文本设置阴影。
text-shadow: h-shadow v-shadow blur color;
注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
|
值 |
描述 |
|
h-shadow |
必需。水平阴影的位置。允许负值。 |
|
v-shadow |
必需。垂直阴影的位置。允许负值。 |
|
blur |
可选。模糊的距离。 |
|
color |
可选。阴影的颜色。 |
③text-overflow 属性规定当文本溢出包含元素时发生的事情
text-overflow: clip|ellipsis|string;
|
值 |
描述 |
|
clip |
修剪文本。 |
|
ellipsis |
显示省略符号来代表被修剪的文本。 |
|
string |
使用给定的字符串来代表被修剪的文本。 |
④新的文本属性
|
属性 |
描述 |
CSS |
|
规定标点字符是否位于线框之外。 |
3 |
|
|
规定是否对标点字符进行修剪。 |
3 |
|
|
text-align-last |
设置如何对齐最后一行或紧挨着强制换行符之前的行。 |
3 |
|
向元素的文本应用重点标记以及重点标记的前景色。 |
3 |
|
|
规定当 text-align 设置为 "justify" 时所使用的对齐方法。 |
3 |
|
|
规定文本的轮廓。 |
3 |
|
|
规定当文本溢出包含元素时发生的事情。 |
3 |
|
|
向文本添加阴影。 |
3 |
|
|
规定文本的换行规则。 |
3 |
|
|
规定非中日韩文本的换行规则。 |
3 |
|
|
允许对长的不可分割的单词进行分割并换行到下一行。 |
3 |
4 CSS3 @font-face 规则
在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。
通过 CSS3，web 设计师可以使用他们喜欢的任意字体。
当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。
您“自己的”的字体是在 CSS3 @font-face 规则中定义的。
<style>
@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 condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
可选。定义如何拉伸字体。默认是 "normal"。 |
|
font-style |
ormal italic oblique |
可选。定义字体的样式。默认是 "normal"。 |
|
font-weight |
normal bold 100 200 300 400 500 600 700 800 900 |
可选。定义字体的粗细。默认是 "normal"。 |
|
unicode-range |
unicode-range |
可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 |