CSS3 1 边框-背景-文本-字体

来源：互联网发布：年鹏外设淘宝店编辑：程序博客网时间：2024/06/05 20:45

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

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

允许对长的不可分割的单词进行分割并换行到下一行。

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 字符范围。默认是"U+0-10FFFF"。

阅读全文

0 0