css3学习笔记
链接地址：http://www.w3school.com.cn/css3/index.asp
- css3简介
- 边框
- 圆角边框
- 边框阴影
- 边框图片
- 小结
- 背景
- 背景尺寸
- 背景定位
- 背景剪裁
- 小结
- 文本属性
- 文本阴影
- 文本换行
- 小结
- 2D转换
- translate
- rotate
- scale
- skew
- matrix
- 小结
- 3D转换
- rotateX
- rotateY
- 过渡
- transition-property
- 过渡时间
- transition-timing-function 属性
- transition-delay属性
- 实例
- 小结
- 动画
- keyframes
- 语法
- 实例
- 动画
- 语法
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-play-state
- animation-fill-mode
- 小结
- 实例
- keyframes
- 多列
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- columns
- 小结
- 用户界面
- appearance
- box-sizing
- outline-offset
- 小结
- 边框
css3简介
css3兼容以前的css版本。
边框
css3中主要的边框属性有：border-image, border-radius, box-shadow。
- IE9+支持border-radius, box-shadow属性。
- FireFox, Chorme和Safari支持所有的新的边框属性。
- 对于border-image属性Safari5及以前的版本要加上-webkit-。
- Opera 支持border-radius, box-shadow，但是对于border-image要加前缀-o-。
圆角边框
用border-radius属性来设置。
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}边框阴影
用box-shadow属性来设置。
div
{
box-shadow: 10px 10px 5px #888888;
}边框图片
用border-image属性来设置。
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 */
}小结
| 属性 | 描述 |
|---|---|
| border-radius | 设置所有四个 border-*-radius 属性的简写属性 |
| border-image | 设置所有 border-image-* 属性的简写属性 |
| box-shadow | 向边框添加一个或多个阴影 |
背景
背景主要增加 background-size和background-origin两个属性。
背景尺寸
用background-size属性来定义。
| 值 | 描述 |
|---|---|
| length | 设置背景图片的宽度和高度。第一个值设置宽度，第二个值设置高度，如果只设置了一个值，那么高度值是auto |
| percentage | 以父元素的百分比来设置宽度和高度 |
| cover | 将背景图像扩展至足够大，以使背景图片覆盖背景区域。背景图片的某些部分也许无法显示在背景图片的定位区域中 |
| contain | 将背景图像扩展到最大区域，使得宽度和高度完全适应内容区域 |
div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}
div
{
background:url(bg_flower.gif);
-moz-background-size:40% 100%; /* 老版本的 Firefox */
background-size:40% 100%;
background-repeat:no-repeat;
} 背景定位
用background-origin属性来定义。
| 值 | 描述 |
|---|---|
| padding-box | 背景图像相对于内边框定位 |
| border-box | 背景图像相对于边框定位 |
| content-box | 背景图像相对于内容定位 |
div{
background-image: url(test.png);
background-repeat: no-repeat;
background-size: 100% 100%;
-webkit-background-origin: content-box; /*Safari*/
background-origin: content-box;
}背景剪裁
用background-clip属性来定义。
| 值 | 描述 |
|---|---|
| border-box | 背景被剪裁到边框盒 |
| padding-box | 背景被剪裁到内边距盒 |
| content-box | 背景被剪裁到内容盒 |
小结
| 属性 | 描述 |
|---|---|
| background-clip | 规定背景绘制区域 |
| background-origin | 规定背景定位区域 |
| background-size | 规定背景尺寸 |
文本属性
文本阴影
用text-shadow属性来定义。
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影位置，可以为负值 |
| v-shadow | 必需。垂直阴影位置，可以为负值 |
| blur | 可选，模糊的距离 |
| color | 可选，阴影的颜色 |
DOCTYPE html>
<html>
<head>
<style>
h1 {text-shadow:2px 2px 8px #FF0000;}
style>
head>
<body>
<h1>模糊效果的文本阴影！h1>
body>
html>文本换行
用word-wrap属性允许长单词换行。
| 值 | 描述 |
|---|---|
| normal | 只在允许的断字点换行 |
| break-word | 在长单词或url内部换行 |
小结
| 属性 | 描述 |
|---|---|
| text-shadow | 向文本添加阴影 |
| word-wrap | 允许对长不可分割的单词进行分割，并换行到下一行 |
2D转换
css3我们可以对元素进行移动、缩放、转动、拉长或拉伸。
translate()
元素从当前位置移动到给定坐标位置。
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 */
}rotate()
通过rotate方法，元素顺时针旋转指定角度，为负值的时候，逆时针旋转指定角度。
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 */
}scale()
通过scale，元素增加或减少指定数字。
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 */
} skew()
通过skew，元素翻转指定的角度。
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 */
}matrix()
通过matrix，集合使用元素的所有2D方法（包括旋转、缩放、移动以及倾斜元素）。
div
{
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 */
}小结
| 属性 | 描述 |
|---|---|
| transform | 向元素应用2D或3D转换 |
| transform-origin | 允许你改变被转换元素的位置 |
2D Transfro方法
| 方法 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定义2D转换，允许使用6个值的转换 |
| translate(x, y) | 定义2D转换，沿着x和y轴移动元素 |
| translateX(n) | 定义2D转换，沿着x轴移动元素 |
| translateY(n) | 定义2D转换，沿着y轴移动元素 |
| scale(x, y) | 定义2D缩放转换，改变元素的宽度和高度 |
| scaleX(n) | 定义2D缩放转换, 改变元素的宽度 |
| scaleY(n) | 定义2D缩放转换, 改变元素的宽度 |
| rotate(angle) | 定义2D旋转, 在参数中规定角度 |
| skew(x-angle, y-angle) | 定义2D倾斜转换，沿着x轴和y轴 |
| skewX(angle) | 定义2D倾斜转换，沿着x轴 |
| skewY(angle) | 定义2D倾斜转换，沿着y轴 |
3D转换
rotateX()
元素围绕X轴以指定角度旋转。
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}rotateY()
元素围绕y轴以制动角度旋转
div{
transform: rotateY(120deg);
-webkit-transform: rotateY（120deg);
-moz-transform: rotateY(120deg);
} 过渡
用transition属性来定义。
transition-property
用来规定过渡属性的名称。
| 值 | 描述 |
|---|---|
| none | 没有属性应用过渡 |
| all | 所有属性都将应用过渡效果 |
| property | 应用过渡效果的属性的名称，用,分割 |
过渡时间
用trasition-duration属性来定义。
| 值 | 描述 |
|---|---|
| time | 规定完成过渡效果需要花费的时间，默认值为0， 即没有过渡效果 |
transition-timing-function 属性
用来规定完成过渡效果的时间曲线。
| 值 | 描述 |
|---|---|
| linear | 规定以相同的速度完成过渡效果，从开始到结束（等于 cubic-bezier(0,0,1,1)） |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)） |
| ease-in | 慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)） |
| ease-out | 慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)） |
| ease-in-out | 慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)） |
| cubic-bezier(n,n,n,n) | n可以是0~1间的值 |
transition-delay属性
用来规定过渡效果什么时候开始。
| 值 | 描述 |
|---|---|
| time | 规定在过渡效果开始之前需要等待的时间，以秒或毫秒计 |
实例
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;
}小结
| 属性 | 描述 |
|---|---|
| transition | 过渡属性。在它中设置4个过渡属性 |
| transition-property | 规定应用过渡属性的名称 |
| transition-duration | 规定过渡属性花费的时间，默认值为0 |
| transition-timing-function | 规定过渡效果的时间曲线，默认值是ease |
| transition-delay | 规定过渡效果何时开始。默认值是0 |
动画
@keyframes
通过@keyframes可以创建动画，动画就是将一种css风格转换为另外一种css风格。
语法
@keyframes animationname {keyframes-selector {css-styles;}}| 参数 | 描述 |
|---|---|
| animationname | 必需。定义的动画的名称 |
| keyframes-selector | 定义动画的时长比。合法值： 0~100%或from或to |
| css-styles | 一个或多个合法的css样式 |
实例
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-o-keyframes mymove /* Opera */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}@keyframes mymove
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-o-keyframes mymove /* Opera */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}动画
用animation属性来定义。
语法
animation: name duration timing-function delay iteration-count direction;animation-name
为动画规定一个名称。
| 值 | 描述 |
|---|---|
| keyframename | 规定需要绑定到选择器的名称 |
| none | 规定无动画效果 |
animation-duration
用来定义动画持续时间。
| 值 | 描述 |
|---|---|
| time | 规定动画花费的时间。默认值是0，也就是没有动画效果 |
animation-timing-function
用来规定完成动画效果的时间曲线。
| 值 | 描述 |
|---|---|
| linear | 规定以相同的速度完成动画效果，从开始到结束（等于 cubic-bezier(0,0,1,1)） |
| ease | 规定慢速开始，然后变快，然后慢速结束的动画效果（cubic-bezier(0.25,0.1,0.25,1)） |
| ease-in | 慢速开始的动画效果（等于 cubic-bezier(0.42,0,1,1)） |
| ease-out | 慢速结束的动画效果（等于 cubic-bezier(0,0,0.58,1)） |
| ease-in-out | 慢速开始和结束的动画效果（等于 cubic-bezier(0.42,0,0.58,1)） |
| cubic-bezier(n,n,n,n) | n可以是0~1间的值 |
animation-delay
用来规定动画的延迟时间。
| 值 | 描述 |
|---|---|
| time | 定义动画开始前的等待时间，以秒或毫秒计 |
animation-iteration-count
用来规定动画播放的次数。
| 值 | 描述 |
|---|---|
| n | 定义动画播放的次数 |
| infinite | 规定动画无限次播放 |
animation-direction
用来规定动画是正向播放还是反向播放。
| 值 | 描述 |
|---|---|
| normal | 默认值。应该正常播放 |
| alternate | 应该反向播放 |
animation-play-state
规定动画是运行还是暂停。
| 值 | 描述 |
|---|---|
| paused | 动画暂停 |
| running | 动画正在播放 |
animation-fill-mode
规定动画播放前或播放后，动画效果是否可见。
| 值 | 描述 |
|---|---|
| none | 不改变默认行为 |
| forwards | 动画完成后保持最后一个属性值 |
| backwards | 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义） |
| both | 向前和向后填充模式都被应用 |
小结
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画 |
| animation | 所有动画的简写模式，除了animation-play-state |
| animation-name | 规定动画名称 |
| animation-duration | 动画持续时间 |
| animation-timing-function | 规定动画的速度曲线。默认是“ease” |
| animation-delay | 规定动画何时开始。默认值是0 |
| animation-iteration-count | 规定动画的播放次数。默认是1 |
| animation-direction | 规定动画在下一周期逆向播放。默认是normal |
| animation-play-state | 规定动画是否正在运行或暂停。默认值是running |
| animation-fill-mode | 规定元素动画时间之外的状态 |
实例
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera: */
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}多列
column-count
规定元素被分割的列数。
| 值 | 描述 |
|---|---|
| number | 元素内容将被划分的最佳列数 |
| auto | 由其它属性决定。如：column-width |
column-fill
规定如何填充列。
| 值 | 描述 |
|---|---|
| balance | 对列进行协调，浏览器应对列长度的差异进行最小化处理 |
| auto | 按顺序对列进行填充，列长度各有不同 |
column-gap
规定列间隔。
| 值 | 描述 |
|---|---|
| length | 将列间隔设置为指定长度 |
| normal | 规定列间隔为一个指定的间隔 |
column-rule
简写属性。规定一个列属性的简写，包含column-rule-color, column-rule-style, column-rule-width。
column-rule-color
定义列之间的颜色。取值同css的color。
column-rule-style
规定列之间的样式规则。
| 值 | 描述 |
|---|---|
| none | 没有规则 |
| hidden | 定义隐藏规则 |
| dotted | 定义点状规则 |
| dashed | 定义虚线规则 |
| solid | 定义实线规则 |
| double | 定义双线规则 |
| grooved | 定义3D grooved规则。该效果取决于宽度和颜色值 |
| ridge | 定义3D ridge规则。该效果取决于宽度和颜色值 |
| inset | 定义3D inset规则。该效果取决于宽度和颜色值 |
| outset | 定义3D outset规则。该效果取决于宽度和颜色值 |
column-rule-width
定义列之间的规则宽度。
| 值 | 描述 |
|---|---|
| thin | 定义纤细规则 |
| medium | 定义中等规则 |
| thick | 定义宽厚规则 |
| length | 定义规则的宽度 |
column-span
定义元素跨多少列。
| 值 | 描述 |
|---|---|
| 1 | 元素应该横跨一列 |
| all | 元素应该横跨所有列 |
columns
定义宽度和数量的简写。
语法： columns: column-width column-count;
小结
| 属性 | 描述 |
|---|---|
| column-count | 定义元素应该被分割的列 |
| column-fill | 定义元素如何被填充 |
| column-gap | 规定列之间的间隔 |
| column-rule | 所有column-rule-*属性的简写 |
| column-span | 规定列应该横跨的列数 |
| column-width | 规定列的宽度 |
| columns | column-width和column-count的简写 |
用户界面
新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。
appearance
| 值 | 描述 |
|---|---|
| normal | 将元素定义为常规元素 |
| icon | 将元素定义为图标 |
| window | 将元素呈现为视口 |
| button | 将元素呈现为button |
| menu | 将元素呈现为一套供用户选择的选项 |
| field | 将元素呈现为输入字段 |
box-sizing
允许以特定的方式定义匹配某个区域的元素。
| 值 | 描述 |
|---|---|
| content-box | 由css2.1定义的宽度和高度。宽度和高度定义到元素的内容，在宽度和高度外绘制元素的内边框和边距 |
| border-box | 为元素设定的宽度和高度决定了元素的边框盒。为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
| inherit | 从父元素继承属性 |
outline-offset
outline-offset 属性对轮廓进行偏移，并在边框边缘进行绘制。
与边框的区别：
* 轮廓不占用空间。
* 轮廓可能是非矩形。
小结
| 属性 | 描述 |
|---|---|
| appearance | 允许将元素设置为标准用户界面元素的外观 |
| box-sizing | 允许您以确切的方式定义适应某个区域的具体内容 |
| outline-offset | 对轮廓进行偏移，并在边框边缘进行绘制轮廓 |