首页  思维导图  详情

CSS3 简介

2016-09-21 14:37:40   0  举报





仅支持查看

AI智能生成

CSS3

作者其他创作

大纲/内容

CSS3 多重背景图片

CSS3 允许您为元素使用多个背景图像。

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

CSS3 文本效果

CSS3 包含多个新的文本特性。

text-shadow word-wrap

CSS3 文本阴影

text-shadow 可向文本应用阴影。

向标题添加阴影： h1 {text-shadow: 5px 5px 5px #FF0000;}

CSS3 自动换行

在 CSS3 中，word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分：

允许对长单词进行拆分，并换行到下一行： p {word-wrap:break-word;}

CSS3 字体

使用粗体字体

CSS3 2D 转换

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

2D 转换方法： translate() rotate() scale() skew() matrix()

translate() 方法

根据给定的 left（x 坐标）和 top（y 坐标）位置参数：

rotate() 方法

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

skew() 方法

元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数

matrix() 方法

matrix() 方法把所有 2D 转换方法组合在一起。 matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

CSS3 过渡

当元素从一种样式变换为另一种样式时为元素添加效果。

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：规定您希望把效果添加到哪个 CSS 属性上规定效果的时长

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

CSS3 动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：规定动画的名称规定动画的时长

什么是 CSS3 中的动画？

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。 0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

CSS3 多列

column-count column-gap column-rule

CSS3 创建多列 column-count 属性规定元素应该被分隔的列数：

CSS3 规定列之间的间隔 column-gap 属性规定列之间的间隔

CSS3 列规则 column-rule 属性设置列之间的宽度、样式和颜色规则。

CSS 用于控制网页的样式和布局。

分支主题

其中最重要的 CSS3 模块包括：选择器框模型背景和边框文本效果 2D/3D 转换动画多列布局用户界面

CSS3 边框

通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 - 并且不需使用设计软件，比如 PhotoShop。

在本章中，您将学到以下边框属性： border-radius box-shadow border-image

CSS3 圆角边框

在 CSS3 中，border-radius 属性用于创建圆角：

实例向 div 元素添加圆角： div { border:2px solid; border-radius:25px; -moz-border-radius:25px; /* Old Firefox */ }

CSS3 边框阴影

box-shadow 用于向方框添加阴影：

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

CSS3 边框图片

通过 CSS3 的 border-image 属性，您可以使用图片来创建边框：

实例使用图片创建围绕 div 元素的边框： 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 背景

CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制。

background-size background-origin

CSS3 background-size 属性

CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。

CSS3 background-origin 属性

实例在 content-box 中定位背景图片： div { background:url(bg_flower.gif); background-repeat:no-repeat; background-size:100% 100%; -webkit-background-origin:content-box; /* Safari */ background-origin:content-box; }

background-origin 属性规定背景图片的定位区域。

CSS3 用户界面

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

resize box-sizing outline-offset

在 CSS3，resize 属性规定是否可由用户调整元素尺寸。