css3笔记01

发表于 | 分类于 ， ， | 本文总阅读量 次
字数统计: 4.1k | 阅读时长 ≈ 16

w3c网站参考连接

CSS3笔记

CSS3边框

圆角边框：border-radius：Xpx

1
2
3
4
5
div
{ border:2px solid;
border-radius:25px;
-moz-border-radius:25px;
}

像素值定义的是圆角的半径，像素值越大，圆角越明显。百分比也可以定义圆角的半径

如果只要其中一边的圆角则：

1
2
3
4
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

边框阴影：

1
2
3
4
5
6
7
8
9
10
11
box-shadow：Xpx（距离垂直边框的宽度） Ypx（距离上边框的宽度）Zpx（阴影的强重程度，如果越小，阴影越重，越大，阴影越小，越透明越模糊） #XXXXXX（阴影的颜色）
div
{ box-shadow: 10px 10px 5px #888888;
}

h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。 测试
spread 可选。阴影的尺寸。 测试
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

边框图片

属性允许您规定用于边框的图片！
1
2
3
4
5
6
7
8
9
10
11
12
例如：
~~~
border-image:url(border.png) 30 30 round; 为round的时候，说明图片铺满整个文本
border-image:url(/i/border.png) 40 23 stretch; 为stretch的时候，是把图片拉伸开来
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移。
border-image-width 图片边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
~~~
## CSS3背景
背景图像设置尺寸：```background-size:

后面可以加的值为：

1
2
3
4
ength 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域（即文本区域）

多重背景图片：background-image:url(bg_flower.gif),url(bg_flower_2.gif);直接添加要设置的背景图片

1
2
3
4
5
6
7
8
9
10
background-origin 属性：
background-origin 属性规定 background-position 属性相对于什么位置来定位。注释：如果背景图像的 background-attachment 属性为 “fixed”，则该属性没有效果。
padding-box 背景图像相对于内边距框来定位。
border-box 背景图像相对于边框盒来定位。即边框（border）
content-box 背景图像相对于内容框来定位。如文本
background-clip 属性
background-clip 属性规定背景的绘制区域，即在规定的区域设置背景
border-box 背景被裁剪到边框盒。即border定义的最外边框
padding-box 背景被裁剪到内边距框，div定义的略小于border的边框
content-box 背景被裁剪到内容框。填写内容的边框

总结：

1
2
3
background-clip 规定背景的绘制区域。
background-origin 规定背景图片的定位区域。
background-size 规定背景图片的尺寸。

CSS3文本效果

文本阴影：

能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
例如：

1
2
3
h1
{ text-shadow: 5px 5px 5px #FF0000;
} 属性值分别表示：x的距离、y的距离、阴影的程度（像素值越大越浅显）、颜色

自动换行word-wrap属性
在 CSS3 中，word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分。

新的文本属性：

1
2
3
4
5
6
7
8
9
10
11
hanging-punctuation 规定标点字符是否位于线框之外。
punctuation-trim 规定是否对标点字符进行修剪。
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。
text-outline 规定文本的轮廓。
text-overflow 规定当文本溢出包含元素时发生的事情。两个属性值：hidden（不显示超出部分）、inherit（显示超出部分）
text-shadow 向文本添加阴影。
text-wrap 规定文本的换行规则。
word-break 规定非中日韩文本的换行规则。
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。

CSS3字体

CSS3 @font-face 规则

在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。通过 CSS3，web 设计师可以使用他们喜欢的任意字体。当您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。
我们“自己的”的字体是在 CSS3 @font-face 规则中定义的。
在新的@font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
< style>
@font-face
{ font-family: myFirstFont;
src: url(‘Sansation_Light.ttf’),
url(‘Sansation_Light.eot’);
}

div
{ font-family:myFirstFont;
} < /style>

使用粗体字体
必须为粗体文本添加另一个包含描述符的 @font-face：
@font-face
{ font-family: myFirstFont;
src: url(‘Sansation_Bold.ttf’),
url(‘Sansation_Bold.eot’);
font-weight:bold;
}

注意：这是在定义完了以后添加的另一个@font-face，但是定义和加粗必须是两个独立的定义，不能合并和省略。
使用两个独立的都要单独定义的方法还可以定义许多其他的文本格式，最重要的都是要独立定义，且是在使用该字体的时候，如果我们要进行文本的加粗或者强调，就直接调用就好了。
列出了能够在 @font-face 规则中定义的所有字体描述符：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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 可选。定义字体的样式。默认是 “normal”。
italic
oblique
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 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。转换是使元素改变形状、尺寸和位置的一种效果。
2D转换包括translate()、rotate()、scale()、skew()、matrix()四种
调用格式为：

1
2
3
4
5
transform: （选择的属性）（值）;
-ms-transform: （选择的属性）（值）;
-webkit-transform:（选择的属性）（值）;
-o-transform:（选择的属性）（值）;
-moz-transform:（选择的属性）（值）;

rotate 旋转

通过rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

1
2
3
4
5
6
7
div
{ transform: rotate(30deg);
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
}

值 rotate(30deg) 把元素顺时针旋转 30 度。

translate转换

通过translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数

1
2
3
4
5
6
7
div
{ transform: translate(50px,100px);
-ms-transform: translate(50px,100px);
-webkit-transform: translate(50px,100px);
-o-transform: translate(50px,100px);
-moz-transform: translate(50px,100px);
}

值translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素

scale转换

通过scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

1
2
3
4
5
6
7
div
{ transform: scale(2,4);
-ms-transform: scale(2,4);
-webkit-transform: scale(2,4);
-o-transform: scale(2,4);
-moz-transform: scale(2,4);
}

值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。按倍数来选择

matrix() 方法

matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

1
2
3
4
5
6
7
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);
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}

新的转换属性：

1
2
transform 向元素应用 2D 或 3D 转换。
transform-origin 允许你改变被转换元素的位置。

CSS3 3D转换

允许使用 3D 转换来对元素进行格式化。rotateX()、rotateY()
调用格式为：

1
2
3
transform: （选择的属性）（值）;
-webkit-transform:（选择的属性）（值）;
-moz-transform:（选择的属性）（值）;

rotateX()方法

通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

1
2
3
4
5
div
{ transform: rotateX(120deg);
-webkit-transform: rotateX(120deg);
-moz-transform: rotateX(120deg);
}

rotateY() 旋转

通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

1
2
3
4
5
div
{ transform: rotateY(130deg);
-webkit-transform: rotateY(130deg);
-moz-transform: rotateY(130deg);
}

CSS3 过渡

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：规定把效果添加到哪个 CSS 属性上、规定效果的时长

应用于宽度属性的过渡效果，时长为 2 秒

1
2
3
4
5
6
div
{ transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;
} 如果时长未规定，则不会有过渡效果，因为默认值是 0。效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时：

多项改变
如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：

1
2
3
4
5
6
7
8
div
{ transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

width+height呈现的效果就是类似于旋转然后变成相应的尺寸大小

总结：
列出所有的过度属性；

1
2
3
4
5
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
transition-delay 规定过渡效果何时开始。默认是 0。即放鼠标上面以后延迟几秒后才开始有动画

CSS3 动画

规则
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。@keyframes 规则用于创建动画。
在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
规定动画的名称、规定动画的时长
必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0

什么是 CSS3 中的动画？

动画是使元素从一种样式逐渐变化为另一种样式的效果。我们可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，我们应该始终定义 0% 和 100% 选择器。

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

1
2
3
4
5
6
@keyframes myfirst
{ 0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

改变背景色和位置：

1
2
3
4
5
6
7
@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;}
}

总结：

1
2
3
4
5
6
7
8
9
10
11
@keyframes
规定动画。如果想要一直有动画，可以在div块里面的animation：Xsinfinite（表示没有限制，如果去除则表示演示一次停止）
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 规定对象动画时间之外的状态。

CSS3 多列

能够创建多个列来对文本进行布局 - 就像报纸那样！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
column-count
column-gap
column-rule
column-count
column-count 属性规定元素应该被分隔的列数

.newspaper
{ -moz-column-count:3;
-webkit-column-count:3;
column-count:3;
}

column-gap
column-gap 属性规定列之间的间隔

.newspaper
{ -moz-column-count:3;
-webkit-column-count:3;
column-count:3;
-moz-column-gap:30px;
-webkit-column-gap:30px;
column-gap:40px;
}

column-rule
column-rule 属性设置列之间的宽度、样式和颜色规则。

.newspaper
{ -moz-column-count:3;
-webkit-column-count:3;
column-count:3;
-moz-column-gap:40px;
-webkit-column-gap:40px;
column-gap:40px;
-moz-column-rule:4px outset #ff0000;
-webkit-column-rule:4px outset #ff0000;
column-rule:4px outset #ff0000;
}

属性表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
column-count 规定元素应该被分隔的列数。
column-fill 规定如何填充列。
column-gap 规定列之间的间隔。
column-rule 设置所有 column-rule-* 属性的简写属性。
column-rule-color 规定列之间规则的颜色。
column-rule-style 规定列之间规则的样式。
none 定义没有规则。
hidden 定义隐藏规则。
dotted 定义点状规则。
dashed 定义虚线规则。
solid 定义实线规则。
double 定义双线规则。
groove 定义 3D grooved 规则。该效果取决于宽度和颜色值。
ridge 定义 3D ridged 规则。该效果取决于宽度和颜色值。
inset 定义 3D inset 规则。该效果取决于宽度和颜色值。
outset 定义 3D outset 规则。该效果取决于宽度和颜色值。

column-rule-width 规定列之间规则的宽度。
CSS3 Resizing
thin 定义纤细规则。
medium 定义中等规则。
thick 定义宽厚规则。
length 规定规则的宽度。

column-span 规定元素应该横跨的列数。
column-width 规定列的宽度。
columns 规定设置 column-width 和 column-count 的简写属性。

用户界面

在 CSS3 中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。

CSS3 Resizing

在 CSS3，resize 属性规定是否可由用户调整元素尺寸。
代码：

1
2
3
4
div
{ resize:both;
overflow:auto;
}

CSS3 Box Sizing

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。
代码：

1
2
3
4
5
6
7
div
{ box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
width:50%;
float:left;
}

CSS3 Outline Offset

outline-offset属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同：轮廓不占用空间、轮廓可能是非矩形

代码：

1
2
3
4
5
div
{ border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

新的用户界面属性：

1
2
3
4
5
6
7
8
9
10
appearance 允许您将元素设置为标准用户界面元素的外观
box-sizing 允许您以确切的方式定义适应某个区域的具体内容。
icon 为创作者提供使用图标化等价物来设置元素样式的能力。
nav-down 规定在使用 arrow-down 导航键时向何处导航。
nav-index 设置元素的 tab 键控制次序。
nav-left 规定在使用 arrow-left 导航键时向何处导航。
nav-right 规定在使用 arrow-right 导航键时向何处导航。
nav-up 规定在使用 arrow-up 导航键时向何处导航。
outline-offset 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
resize 规定是否可由用户对元素的尺寸进行调整。
-------------本文结束感谢您的阅读-------------