200m的空间可以做大大的网站,市桥网站建设培训,wordpress 模板制作软件,哈尔滨网站建设设计文章目录 1.简介2.边框3.圆角4.背景5.渐变CSS3 径向渐变6.文本效果7.字体8.2D转换9.3D转换10.过渡11.动画12.多列13.用户界面14.按钮 1.简介
模块 CSS3 被拆分为模块。旧规范已拆分成小块#xff0c;还增加了新的。
一些最重要 CSS3 模块如下#xff1a;
选… 文章目录 1.简介2.边框3.圆角4.背景5.渐变CSS3 径向渐变6.文本效果7.字体8.2D转换9.3D转换10.过渡11.动画12.多列13.用户界面14.按钮 1.简介
模块 CSS3 被拆分为模块。旧规范已拆分成小块还增加了新的。
一些最重要 CSS3 模块如下
选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面
2.边框
3.圆角 CSS3 border-radius - 指定每个圆角 如果你在 border-radius 属性中只指定一个值那么将生成 4 个 圆角。
但是如果你要在四个角上一一指定可以使用以下规则
四个值: 第一个值为左上角第二个值为右上角第三个值为右下角第四个值为左下角。三个值: 第一个值为左上角, 第二个值为右上角和左下角第三个值为右下角两个值: 第一个值为左上角与右下角第二个值为右上角与左下角一个值 四个圆角值相同
4.背景
CSS3 中包含几个新的背景属性提供更大背景元素控制。
在本章您将了解以下背景属性
background-image background-size background-origin background-clip
5.渐变
CSS3 渐变gradients可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前你必须使用图像来实现这些效果。但是通过使用 CSS3 渐变gradients你可以减少下载的时间和宽带的使用。此外渐变效果的元素在放大时看起来效果更好因为渐变gradient是由浏览器生成的。
CSS3 定义了两种类型的渐变gradients
线性渐变Linear Gradients- 向下/向上/向左/向右/对角方向 径向渐变Radial Gradients- 由它们的中心定义
CSS3 径向渐变
径向渐变由它的中心定义。
为了创建一个径向渐变你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时你也可以指定渐变的中心、形状圆形或椭圆形、大小。默认情况下渐变的中心是 center表示在中心点渐变的形状是 ellipse表示椭圆形渐变的大小是 farthest-corner表示到最远的角落。
6.文本效果
CSS3 文本效果 CSS3中包含几个新的文本特征。
在本章中您将了解以下文本属性
text-shadow 文本阴影 box-shadow 盒子阴影 text-overflow word-wrap word-break
新文本属性
7.字体
8.2D转换
CSS3 转换 CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。
它是如何工作 转换的效果是让某个元素改变形状大小和位置。
您可以使用 2D 或 3D 转换来转换您的元素。
translate() rotate() scale() skew() matrix()
9.3D转换
3D 转换 CSS3 允许您使用 3D 转换来对元素进行格式化。
在本章中您将学到其中的一些 3D 转换方法
rotateX() rotateY()
10.过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点必须规定两项内容
指定要添加效果的CSS属性 指定效果的持续时间。
11.动画
CSS3 keyframes 规则 要创建 CSS3 动画你需要了解 keyframes 规则。
keyframes 规则是创建动画。
keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
当在 keyframes 创建动画把它绑定到一个选择器否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器
规定动画的名称 规定动画的时长
CSS3动画是什么 动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间或用关键词 “from” 和 “to”等同于 0% 和 100%。
0% 是动画的开始100% 是动画的完成。
为了得到最佳的浏览器支持您应该始终定义 0% 和 100% 选择器。
12.多列
13.用户界面
在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸框尺寸和外边框。
在本章中您将了解以下的用户界面属性
resize box-sizing outline-offset
14.按钮
我们可以使用 border-radius 属性来设置圆角按钮:
实例
.button1 {border-radius: 2px;} .button2 {border-radius: 4px;} .button3 {border-radius: 8px;} .button4 {border-radius: 12px;} .button5 {border-radius: 50%;}我们可以使用 border 属性设置按钮边框颜色:
实例
.button1 {background-color: white;color: black;border: 2px solid #4CAF50; /* Green */
}我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。
提示: 我们可以使用 transition-duration 属性来设置 “hover” 效果的速度:
实例 .button { -webkit-transition-duration: 0.4s; /* Safari / transition-duration: 0.4s; } .button:hover { background-color: #4CAF50; / Green */ color: white; }
补充 CSS三大特性层叠性继承性优先级 权重 清除内外边距
清除浮动
定位 字体图标
布局技巧
新增属性选择器
