06.00.CSS3入门探究.pdf

CSS3入门 窦连军@八月虎baidu 议程 ? CSS3 介绍 ? CSS3 边框（Borders） ? CSS3 背景（Backgrounds） ? CSS3 文本效果（Text Effects） ? CSS3 字体（Fonts） ? CSS3 2D 变形（Transforms） ? CSS3 3D 变形（Transforms） ? CSS3 渐变（Transitions） ? CSS3 动画（Animations） ? CSS3 多列（Multiple columns） ? CSS3 选择器（selectors） 1. CSS3介绍 1.1 CSS3是什么，我们为什么要使用它？ ? 继承自CSS2 ? 有新的模块 ? 下面列出了非完全的特性，这些特性通常被称为“CSS3”特性 – 一些最重要的CSS3模块包括： – Selectors 选择器 – Box Model Box模型 – Backgrounds and Borders 背景和边框 – Text Effects 文字特效 – 2D/3D Transformations 2D/3D变形 – Animations 动画 – Multiple Column Layout 多列布局 2. CSS3 边框 介绍 利用CSS3, 你可以创建圆角边框，增加盒子阴影，甚至可以使用图片来作为边框。 2. CSS3 边框 div这是一个区块/div style type=text/css div { height: 100px ; width: 100px; margin: 10px auto; line-height: 100px; background-color: #eee; border-width: 1px 2px 3px 4px; border-style: solid; border-radius: 10px 40px 20px; } /style div这是一个区块/div style type=text/css div { height: 100px ; width: 100px; margin: 10px auto; line-height: 100px; background-color: #eee; border-width: 1px 2px 3px 4px; border-style: solid; border-radius: 10px/40px; } /style div这是一个区块/div style type=text/css div { height: 100px ; width: 100px; margin: 10px auto; line-height: 100px; background-color: #eee; border-style: solid dotted groove double; border-radius: 10px/40px; border-color: #0f0 #00f #f00 #0ee; } /style 2. CSS3 边框 2. CSS3 边框 2. CSS3 边框 2. CSS3 边框 2. CSS3 边框 2. CSS3 边框 2. CSS3 边框 2. CSS3 边框 2. CSS3 边框 子弹效果 2. CSS3 边框 2. CSS3 边框 3. CSS3 背景 我们来看看新的背景属性. 这包括背景尺寸（background size）, 给一个元素使用一个以上的背景, 已 经背景原点 (这影响背景的所在位置). 新特性可更好地控制背景元素，并提供一种新的可能。 多背景 使用多背景方式，可以极大地节省时间，以前这需要使用多个DIV元素才可实现相同效果。其与 background-size的结合更有趣。 下例中，对于顶边框使用一个背景，对于左右边框和下边框使用同样的背景。 3. CSS3 背景覆盖 background-size需要两个值，它的类型可以是像素（px）、百分比（%）或是 auto，还可以是cover和contain。第一个值为背景图的width，另外一个值用于 指定背景图上的height，如果只设定1个值，则第2个默认为auto，但当值为 cover和contain时除外。 cover：保持图像的宽高比例，将图片缩放到正好完全覆盖定义的背景区域， 其中有一边和背景相同。可以称为“全覆盖”模式。 contain：保持图像的宽高比例，将图片缩放到宽或者高正好适应定义背景的区 域，但背景仍在定义的区域之内。可以称为“被包含”模式。 4. CSS3 文字效果 本