css3
来源:互联网 发布:淘宝网官网登录 编辑:程序博客网 时间:2024/06/01 09:22
css3新特性:
CSS3 模块
CSS3 被划分为模块。
其中最重要的 CSS3 模块包括:
选择器框模型背景和边框文本效果2D/3D 转换动画多列布局用户界面
一.CSS3 边框
通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件,比如 PhotoShop。新的边框属性border-image 设置所有 border-image-* 属性的简写属性。 border-radius 设置所有四个 border-*-radius 属性的简写属性。 box-shadow 向方框添加一个或多个阴影。
二.CSS3 背景
新的背景属性
1.background-size 属性规定背景图片的尺寸。 您能够以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。 2.CSS3 background-origin 属性规定背景图片的定位区域。 背景图片可以放置于 content-box、padding-box 或 border-box 区域。 3.background-clip 规定背景的绘制区域。 4.CSS3 多重背景图片 CSS3 允许您为元素使用多个背景图像。 例如:body { background-image:url(bg_flower.gif),url(bg_flower_2.gif); }
三.CSS3 文本效果
1.text-shadow可向文本应用阴影。 您能够规定水平阴影、垂直阴影、模糊距离,以及阴影的颜色:
实例:向标题添加阴影:h1{text-shadow: 5px 5px 5px #FF0000;}
2.CSS3 自动换行
单词太长的话就可能无法超出某个区域:在 CSS3 中,word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分:实例:允许对长单词进行拆分,并换行到下一行: p {word-wrap:break-word;}
3.新的文本属性
属性 描述 CSShanging-punctuation 规定标点字符是否位于线框之外。 3punctuation-trim 规定是否对标点字符进行修剪。 3text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 3text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 3 text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 3 text-outline 规定文本的轮廓。 3text-overflow 规定当文本溢出包含元素时发生的事情。 3 text-shadow 向文本添加阴影。 3text-wrap 规定文本的换行规则。 3word-break 规定非中日韩文本的换行规则。 3word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。 3
四.CSS3 字体描述符
下面的表格列出了能够在 @font-face 规则中定义的所有字体描述符: 描述符 值 描述 font-family name 必需。规定字体的名称。 src URL 必需。定义字体文件的 URL。 font-stretch normal 可选。定义如何拉伸字体。默认是 "normal"。 condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded 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"。
五.CSS3 2D 转换
通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸
1.新的转换属性
(1)transform 向元素应用 2D 或 3D 转换。(2)transform-origin 允许你改变被转换元素的位置。
2.2D Transform 方法
(1)matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
(2)translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。
(3)translateX(n) 定义 2D 转换,沿着 X 轴移动元素。
(4)translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。
(5)scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。
(6)scaleX(n) 定义 2D 缩放转换,改变元素的宽度。
(7)scaleY(n) 定义 2D 缩放转换,改变元素的高度。
(8)rotate(angle) 定义 2D 旋转,在参数中规定角度。
(9)skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。
(10)skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
(11)skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。
六.CSS3 3D 转换
1.转换属性
(1)transform 向元素应用 2D 或 3D 转换。 3 (2)transform-origin 允许你改变被转换元素的位置。 3 (3)transform-style 规定被嵌套元素如何在 3D 空间中显示。 3 (4)perspective 规定 3D 元素的透视效果。 3 (5)perspective-origin 规定 3D 元素的底部位置。 3 (6)backface-visibility 定义元素在不面对屏幕时是否可见。
2.3D Transform 方法
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。 translate3d(x,y,z) 定义 3D 转化。 translateX(x) 定义 3D 转化,仅使用用于 X 轴的值。 translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值。translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值。scale3d(x,y,z) 定义 3D 缩放转换。scaleX(x) 定义 3D 缩放转换,通过给定一个 X 轴的值。scaleY(y) 定义 3D 缩放转换,通过给定一个 Y 轴的值。 scaleZ(z) 定义 3D 缩放转换,通过给定一个 Z 轴的值。rotate3d(x,y,z,angle) 定义 3D 旋转。 rotateX(angle) 定义沿 X 轴的 3D 旋转。rotateY(angle) 定义沿 Y 轴的 3D 旋转。rotateZ(angle) 定义沿 Z 轴的 3D 旋转。perspective(n) 定义 3D 转换元素的透视视图。
七.CSS3 过渡
1.CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点,必须规定两项内容:
规定您希望把效果添加到哪个 CSS 属性上
规定效果的时长
注释:如果时长未规定,则不会有过渡效果,因为默认值是 0。效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时:实例:规定当鼠标指针悬浮于 <div> 元素上时:div:hover{ width:300px;}注释:当指针移出元素时,它会逐渐变回原来的样式。多项改变如需向多个样式添加过渡效果,请添加多个属性,由逗号隔开:
2.过渡属性
transition 简写属性,用于在一个属性中设置四个过渡属性。 3transition-property 规定应用过渡的 CSS 属性的名称。 3 transition-duration 定义过渡效果花费的时间。默认是 0。 3 transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3 transition-delay 规定过渡效果何时开始。默认是 0。
八.CSS3 动画
1.CSS3 @keyframes 规则
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
实例@keyframes myfirst{ from {background: red;} to {background: yellow;}}@-moz-keyframes myfirst /* Firefox */{ from {background: red;} to {background: yellow;}}@-webkit-keyframes myfirst /* Safari 和 Chrome */ { from {background: red;} to {background: yellow;} } @-o-keyframes myfirst /* Opera */{ from {background: red;} to {background: yellow;}}
2.CSS3 动画
当您在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:(1)规定动画的名称(2)规定动画的时长实例把 "myfirst" 动画捆绑到 div 元素,时长:5 秒: div{animation: myfirst 5s; -moz-animation: myfirst 5s; /* Firefox */ -webkit-animation: myfirst 5s; /* Safari 和 Chrome */ -o-animation: myfirst 5s; /* Opera */}注意:请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。 0% 是动画的开始,100% 是动画的完成。为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。例如:@keyframes myfirst @keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} }
3.CSS3 动画属性
属性 描述 CSS @keyframes 规定动画。 3 animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3 animation-name 规定 @keyframes 动画的名称。 3animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3animation-delay 规定动画何时开始。默认是 0。 3animation-iteration-count 规定动画被播放的次数。默认是 1。 3 animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3 animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3animation-fill-mode 规定对象动画时间之外的状态。
九.CSS3 多列
新的多列属性
属性 描述 CSS column-count 规定元素应该被分隔的列数。 3 column-fill 规定如何填充列。 3 column-gap 规定列之间的间隔。 3 column-rule 设置所有 column-rule-* 属性的简写属性。 3 column-rule-color 规定列之间规则的颜色。 3 column-rule-style 规定列之间规则的样式。 3 column-rule-width 规定列之间规则的宽度。 3 column-span 规定元素应该横跨的列数。 3 column-width 规定列的宽度。 3 columns 规定设置 column-width 和 column-count 的简写属性。 3
CSS3十. 用户界面
新的用户界面属性
属性 描述 CSS appearance 允许您将元素设置为标准用户界面元素的外观 3 box-sizing 允许您以确切的方式定义适应某个区域的具体内容。 3 icon 为创作者提供使用图标化等价物来设置元素样式的能力。 3 nav-down 规定在使用 arrow-down 导航键时向何处导航。 3 nav-index 设置元素的 tab 键控制次序。 3 nav-left 规定在使用 arrow-left 导航键时向何处导航。 3nav-right 规定在使用 arrow-right 导航键时向何处导航。 3nav-up 规定在使用 arrow-up 导航键时向何处导航。 3outline-offset 对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。 3resize 规定是否可由用户对元素的尺寸进行调整。 3
- css3
- css3
- css3
- css3
- css3
- css3
- CSS3
- CSS3
- css3
- CSS3
- css3
- css3
- CSS3
- css3
- css3
- css3
- css3
- css3
- Memcache基础教程
- c程序多次调用python脚本的正确打开模式
- 自动化基础课程——工艺
- 朴素贝叶斯分类算法理解及文本分类器实现
- Jmeter使用_time函数实现同一个接口参数传入可以每次传入不同的参数
- css3
- D
- 【Java Opencv系列】5.1彩色图像转灰度
- 03.控制器
- PHP内核探索之变量(1)Zval
- 不能将类型为‘std::string&’的非 const 引用初始化为类型为‘const char*’的临时变量
- 脚本实现获取cloudstack中资源和一些状态信息以html报表显示
- linux 服务器间文件同步的简单实现
- 你也可以做数据存储专家,RAID就是这么简单!