Web基础之CSS3
来源:互联网 发布:方便面怎么煮好吃知乎 编辑:程序博客网 时间:2024/06/05 11:35
概述:css3完全向后兼容,不需要改变已有设计。浏览器通常支持 CSS2。
CSS3被划分成模块,【-moz- , -o- , -webkit-】
有:
1)选择器
2)框模型
3)背景:
—>属性:
->:background-size:规定背景图片的尺寸。
->:background-origin: 规定背景图片的定位区域。
->:background-clip: 规定背景的绘制区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。
div{ #背景图片进行拉伸,使其完成填充内容区域background:url(bg_flower.gif);-moz-background-size:40% 100%; /* 老版本的 Firefox */background-size:40% 100%;background-repeat:no-repeat;}div{ #在 content-box 中定位背景图片background:url(bg_flower.gif);background-repeat:no-repeat;background-size:100% 100%;-webkit-background-origin:content-box; /* Safari */background-origin:content-box;}body{ # 多重背景图片,为 body 元素设置两幅背景图片background-image:url(bg_flower.gif),url(bg_flower_2.gif);}
4)边框:
—>属性:
->: border-radius :设置所有四个 border-*-radius 属性的简写属性。
->: box-shadow :向方框添加一个或多个阴影。
->: border-image :设置所有 border-image-* 属性的简写属性。
div{ #圆角边框border:2px solid;border-radius:25px;-moz-border-radius:25px; /* Old Firefox */}div{ #方框阴影box-shadow: 10px 10px 5px #888888;}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 */}
5)文本效果:
—>属性:
->: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: 允许对长的不可分割的单词进行分割并换行到下一行。
—>字体:可将使用的字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。您“自己的”的字体是在 CSS3 @font-face 规则中定义的。
->使用:新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。
@font-face{ #粗体字体font-family: myFirstFont;src: url('Sansation_Bold.ttf'), url('Sansation_Bold.eot'); /* IE9+ */font-weight:bold;}
->CSS3字体描述符:
> font-family:name,必需。规定字体的名称。 > src:url,必需。定义字体文件的 URL。 >font-stretch:normal,可选。定义如何拉伸字体。默认是 "normal"。 >font-style:ormal,可选。定义字体的样式。默认是 "normal"。 >font-weight:bold,可选。定义字体的粗细。默认是 "normal"。 >unicode-range:可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。
6)2D/3D效果:
—>转换属性:
->:transform:向元素应用 2D 或 3D 转换。
->:transform-origin:允许你改变被转换元素的位置。
->:transform-style:规定被嵌套元素如何在 3D 空间中显示。
->:perspective:规定 3D 元素的透视效果。
->:perspective-origin:规定 3D 元素的底部位置。
->:backface-visibility:定义元素在不面对屏幕时是否可见。
—>2D转换方法:
->:translate():元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标)
->:rotate():元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。
->:scale():元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)
->:skew():元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)
->:matrix():把所有 2D 转换方法组合在一起,需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。
div{ #移动transform: translate(50px,100px);-ms-transform: translate(50px,100px); /* IE 9 */-webkit-transform: translate(50px,100px); /* Safari and Chrome */-o-transform: translate(50px,100px); /* Opera */-moz-transform: translate(50px,100px); /* Firefox */}
div{ #旋转transform: rotate(30deg);-ms-transform: rotate(30deg); /* IE 9 */-webkit-transform: rotate(30deg); /* Safari and Chrome */-o-transform: rotate(30deg); /* Opera */-moz-transform: rotate(30deg); /* Firefox */}
div{ #缩放transform: scale(2,4);-ms-transform: scale(2,4); /* IE 9 */-webkit-transform: scale(2,4); /* Safari 和 Chrome */-o-transform: scale(2,4); /* Opera */-moz-transform: scale(2,4); /* Firefox */}
div{ # 翻转transform: skew(30deg,20deg);-ms-transform: skew(30deg,20deg); /* IE 9 */-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */-o-transform: skew(30deg,20deg); /* Opera */-moz-transform: skew(30deg,20deg); /* Firefox */}
div{ #使用matrix方法将div旋转30度transform:matrix(0.866,0.5,-0.5,0.866,0,0);-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */}
—>3D转换方法:Chrome 和 Safari 需要前缀 -webkit-。Opera不支持
case>: rotateX/Y/Z():
case>: rotate3d(x,y,z,angle):元素围绕其 X/Y/Z 轴以给定的度数进行旋转。
case>: translateX/Y/Z():
case>: translate3d(x,y,z):元素以其 X/Y/Z 轴以给定的值移动。
case>: scaleX/Y/Z():
case>: scale3d(x,y,z):元素以其 X/Y/Z 轴以给定的值缩放。
case>: matrix3d(n…n):定义 3D 转换,使用 16 个值的 4x4 矩阵。
case>: perspective(n):定义 3D 转换元素的透视视图
7)过渡:是元素从一种样式逐渐改变为另一种的效果。
*必须规定两项内容:
规定您希望把效果添加到哪个 CSS 属性上
规定效果的时长
—>属性:
->:transition:简写属性,用于在一个属性中设置四个过渡属性。
->:transition-property: 规定应用过渡的 CSS 属性的名称。
->:transition-duration:定义过渡效果花费的时间。默认是 0。
->:transition-timing-function: 规定过渡效果的时间曲线。默认是 “ease”。
->:transition-delay: 规定过渡效果何时开始。默认是 0。
div{transition-property: width;transition-duration: 1s;transition-timing-function: linear;transition-delay: 2s;/* Firefox 4 */-moz-transition-property:width;-moz-transition-duration:1s;-moz-transition-timing-function:linear;-moz-transition-delay:2s;/* Safari 和 Chrome */-webkit-transition-property:width;-webkit-transition-duration:1s;-webkit-transition-timing-function:linear;-webkit-transition-delay:2s;/* Opera */-o-transition-property:width;-o-transition-duration:1s;-o-transition-timing-function:linear;-o-transition-delay:2s;}/* 使用简写方式 */div{transition: width 1s linear 2s;/* Firefox 4 */-moz-transition:width 1s linear 2s;/* Safari and Chrome */-webkit-transition:width 1s linear 2s;/* Opera */-o-transition:width 1s linear 2s;}
8)动画:@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。IE9之前的版本不支持
@keyframes myfirst{from {background: red;}to {background: yellow;}}@-moz-keyframes / @-webkit-keyframes / @-o-keyframes myfirst /* Firefox */{from {background: red;}to {background: yellow;}}
from表示0%,动画的开始,to表示100%动画的结束,也可支持使用%:
@keyframes myfirst{0% {background: red;}25% {background: yellow;}50% {background: blue;}100% {background: green;}}
—>绑定到选择器:规定动画的名称、时长
div{animation: myfirst 5s;-moz-animation: myfirst 5s; /* Firefox */-webkit-animation: myfirst 5s; /* Safari 和 Chrome */-o-animation: myfirst 5s; /* Opera */}
—>animation属性:
->:@keyframes:规定动画。
->:animation:所有动画属性的简写属性,除了 animation-play-state 属性
->:animation-name:规定 @keyframes 动画的名称。
->:animation-duration:规定动画完成一个周期所花费的秒或毫秒。默认是 0。
->:animation-timing-function:规定动画的速度曲线。默认是 “ease”。
->:animation-delay:规定动画何时开始。默认是 0。
->:animation-iteration-count:规定动画被播放的次数。默认是 1。
->:animation-direction:规定动画是否在下一周期逆向地播放。默认是 “normal”。
->:animation-play-state:规定动画是否正在运行或暂停。默认是 “running”。
->:animation-fill-mode:规定对象动画时间之外的状态。
9)多列布局
—>属性:-moz- -webkit- -o-
->:column-count:规定元素应该被分隔的列数。
->:column-fill:规定如何填充列。
->:column-gap:规定列之间的间隔。
->:column-rule:设置所有 column-rule-* 属性的简写属性。
->:column-rule-color:规定列之间规则的颜色。
->:column-rule-style:规定列之间规则的样式。
->:column-rule-width:规定列之间规则的宽度。
->:column-span:规定元素应该横跨的列数。
->:column-width:规定列的宽度。
->:columns:规定设置 column-width 和 column-count 的简写属性。
10)用户界面:包括元素尺寸、盒尺寸及轮廓等
—>属性:-moz- -webkit- -o-
->:appearance:允许将元素设置为标准用户界面元素的外观
->:box-sizing:允许以确切的方式定义适应某个区域的具体内容。
->:icon:为创作者提供使用图标化等价物来设置元素样式的能力。
->:nav-down:规定在使用 arrow-down 导航键时向何处导航。
->:nav-up:规定在使用 arrow-up 导航键时向何处导航。
->:nav-index:设置元素的 tab 键控制次序。
->:nav-left:规定在使用 arrow-left 导航键时向何处导航。
->:nav-right: 规定在使用 arrow-right 导航键时向何处导航。
->:outline-offset:对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。轮廓不占用空间;轮廓可能是非矩形
->:resize:规定是否可由用户对元素的尺寸进行调整。
div{ #规定 div 元素可由用户调整大小resize:both;overflow:auto;}div{ # 两个并排的带边框方框box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */width:50%;float:left;}div{#规定边框边缘之外 15 像素处的轮廓border:2px solid black;outline:2px solid red;outline-offset:15px;}
博客地址:Web基础之CSS3
- Web基础之CSS3
- web前端-CSS3基础
- css3之canvas 基础
- 前端基础之CSS3
- [CSS3]移动Web开发系列之CSS3增强型选择器
- [笔记]WEB开发之3456:CSS3
- 相应试web设计之css3 media
- 从零开始,学习web前端之CSS3
- 【HTML5与CSS3基础】HTML5本地存储 Web Storage
- WEB前端 | H5基础——(3)CSS3选择器
- css3基础02web字体及字体图标
- Web基础之Javascript
- Web基础之HTML
- Web之Javascript基础
- WEB基础之:HTML
- WEB基础之:CSS
- Web基础之HTML
- Web基础之HTML5
- Python else语句
- 入门训练 Fibonacci数列
- 【详解】嵌入式开发中固件的烧录方式
- java输入输出(二)
- 内核链
- Web基础之CSS3
- 268. Missing Number
- Hexo 博客空间
- 198. House Robber&&213. House Robber II
- Linux与Unix的关系
- 动态规划(完全背包的变形)
- 测试面试题
- [Debug之路]Linux+C遇到的问题记录
- webstorm2.3 for Mac下载及最新破解方式-----2017/02/25(更新)