Web基础之CSS3

概述：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

python web真的没机会了吗？

请问一下计算机网路专业想转行前端工作是自学还是培训？

现实中，web开发，自己写框架的单位or团队多吗？

刚入门前端，现在有点迷茫怎么选择。？

web应用中，提交的表单数据前端验证和后端验证同时存在是否是一种常识？

如何在短时间内提高前端开发能力？

关于android跟资料库的一些问题和我的理解?

选择前端还是后端?

想自学web前端开发，有好方法推荐吗？

web前端初学者，刚学完jq，想问一下知乎大佬前辈同行，接下来学vue和node先学哪个好？

前端与后端数据交互格式有争议，到底是谁的问题？

前端跨域怎么解决？

Web前端工程师培训哪家好？

web前端学习大概要多久？

请问问卷星样本服务可靠嘛！?

热门新闻

周热门