CSS3（补充）

CSS3（补充）

---

• css3完全向后兼容，因此不必要改变现有设计。

---

css3边框

• 通过css3，我们可以创建圆角边框，向矩形添加阴影，使用图片来绘制边框。

border-radius（圆角边框）

div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* 旧版火狐需要前缀-o- */
}

• JavaScript语法👇

	object.style.borderRadius="5px"

• 完整语法👇

border-radius: 1-4 length|% / 1-4 length|%;

• 👆上述/左边的四个数值是圆角的水平半径，后边的四个数值是圆角的垂直半径。
  
• 按照顺序设置每个角的值。如果省略左下角，则与右上角相同。如果省略右下角，则与左上角相同。如果省略右上角，则与左上角相同。
• 例子👇

border-radius: 2em 1em 4em / 0.5em 3em;

👆等价于👇

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

box-shadow（边框阴影）

div{
	box-shadow: 10px 10px 5px #888888;
}

👇运行结果👇

• JavaScript语法👇

	object.style.boxShadow="10px 10px 5px #888888"

• 完整语法👇

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置，允许负值。
blur	可选。模糊距离。
spread	可选。模糊的尺寸。
color	可选。阴影的颜色。
inset	可选。将外部阴影（outset改为内部阴影）。

border-image（边框图片）

• border-image属性是一个简写属性，用于设置以下属性：
  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat
• 如果省略值，会设置其默认值。
• 提示请使用border-image-*属性来构造漂亮的可伸缩按钮！
• JavaScript语法👇

object.style.borderImage="url(border.png) 30 30 round"

值	描述
border-image-source	用在边框图片的路径
border-image-slice	图片边框向内偏移
border-image-width	图片边框的宽度
border-image-outset	边框图像区域超出边框的量
border-image-repeat	图形边框是否够应该平铺（repeat）、铺满（round）或拉伸（stretch）

---

css3背景

background-size

• background-size属性规定背景图片的尺寸。
• 在css3之前，背景图片的尺寸是由图片的实际尺寸决定的。在css3中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。
• JavaScript语法👇

	object.style.backgroundSize="60px 80px"

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

background-origin

-background-origin属性规定背景图片的定位区域。

• 背景图片可放置于content-box（内容）、padding-box（内边框）或border-box（边框）区域。
  

background-clip

• background-clip规定背景的绘制区域。

值	描述
border-box	背景被裁剪到边框
padding-box	北京被裁剪到内边距框
content-box	背景被裁剪到内容框

---

css3文本效果

text-shadow（文本阴影）

• 我们可以规定水平阴影，垂直阴影，模糊距离以及阴影的颜色
• 完整语法👇

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

自动换行

p {
	word-wrap:break-word;
}

值	描述
normal	只在允许的换行点进行换行。
none	不换行。元素无法容纳的文本会溢出。
unrestricted	在任意两个字符间换行。
suppress	压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。

---

css3字体

• 通过css3，web设计师再也不必被迫使用“web-safe”字体了。

@font-face

• 在css3之前，web设计师必须使用已在用户计算机上安装号的字体。
• 通过css3，web设计师可以使用他们喜欢的任何字体。
• 在新的@font-face规则中，您必须首先定义字体名称（比如myFont），然后指向字体文件。

@font-face{
	font-family: myFont;
	src: url('Light.ttf');
}

div{
	font-family:myFont;
}

使用粗体字体

• 只要font-family为“myFount”的文本设置粗体，浏览器就会使用该字体。
• 通过这种方式，我们可以为相同的字体设置许多@font-face规则。

@font-face{
	font-family: myFont;
	src: url('Bold.ttf'); 
	font-weight:bold;
}

描述符	值	描述
font-family	name	必需。规定字体的名称。
src	URL	必需。定义字体文件的 URL。
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可选。定义如何拉伸字体。默认是 “normal”。
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转换，我们能够对元素进行缩放，移动，转动，拉长或拉伸。
• 转换是使元素改变形状，尺寸和位置的一种效果。

translate（）方法（移动）

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

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()方法，元素的尺寸会增加或减少，根据给定的宽度（x轴）和高度（y轴）参数：

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()方法，元素翻转给定的角度，根据给定的水平线（x轴）和垂直线（y轴）参数：

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（）方法（2D转换整合）

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

---

css3 3D转换

• 转换是使元素改变形状，尺寸和位置的一种效果。

rotateX（）方法（x轴）

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

div{
	transform: rotateX(120deg);

	-webkit-transform: rotateX(120deg);	/* Safari 和 Chrome */
	-moz-transform: rotateX(120deg);	/* Firefox */
}

rotateY（）方法（y轴）

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

div{
	transform: rotateY(130deg);
	
	-webkit-transform: rotateY(130deg);	/* Safari 和 Chrome */
	-moz-transform: rotateY(130deg);	/* Firefox */
}

---

css3过渡

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

工作原理

• 两条必要内容：
  • 规定您希望把效果添加到哪个css属性上
  • 规定效果的时上

例子：应用于宽度属性的过渡效果，时长为2s👇

div{
	transition: width 2s;
	
	-moz-transition: width 2s;	/* Firefox 4 */
	-webkit-transition: width 2s;	/* Safari 和 Chrome */
	-o-transition: width 2s;	/* Opera */
}

如果时长未规定，则不会有过渡效果，因为默认值是0。
效果开始于指定的css属性改变值时。css属性改变的典型时间是鼠标指针位于元素上时。

div:hover{
	width:300px;
}

注意：当指针移出元素时，它会逐渐变回原来的样式。

多项样式改变

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

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;
}

transition

-transition属性是一个简写属性，用于设置四个过渡属性

值	描述
transition-property	规定设置过渡效果的css属性的名称
transition-duration	对丁完成过渡效果需要多少毫秒或秒。默认是0
transition-timing-function	规定速度效果的速度曲线
transition-delay	定义过渡效果何时开始。默认是0

transition-timing-function

-transition-timing-function属性规定过渡效果的速度曲线。

• 该属性允许通过过渡效果随着时间来改变其速度。

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于cubic-bezier(0,0,1,1)）
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（等于cubic-bezier(0.25,0.1,0.25,0.1)）
ease-in	规定以慢速开始的过渡效果（等于cubit-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)	在 cubic-bezier函数中定义自己的值。可能的值是0 至 1 之间的数值。

---

css3动画

• 通过css3，我们能过创建动画，这可以在许多网页中取代动画图片，Flash动画以及JavaScript。

@keyframes规则

• 当我们在@keyframes中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
• 通过规定至少一下两项css3动画属性，即可将动画绑定到选择器上：
  • 规定动画名称
  • 规定动画时长
• 如果忽略时长，动画不会允许，因为默认值是0

动画是使元素从一种样式逐渐变化成另一种样式的效果。
我们可以改变任意多的样式，任意多的次数
用百分比来规定变化发生的时间，或用关键字“from”和“to”，等同于0%和100%
0%是动画的开始，100%是动画的完成

@keyframes myfirst{
	0%   {background: red;}
	25%  {background: yellow;}
	50%  {background: blue;}
	100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */{
	0%   {background: red;}
	25%  {background: yellow;}
	50%  {background: blue;}
	100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */{
	0%   {background: red;}
	25%  {background: yellow;}
	50%  {background: blue;}
	100% {background: green;}
}

@-o-keyframes myfirst /* Opera */{
	0%   {background: red;}
	25%  {background: yellow;}
	50%  {background: blue;}
	100% {background: green;}
}

属性	描述
@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”。另一个是“alternate”
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。 另一个是“paused”
animation-fill-mode	规定对象动画时间之外的状态。

---

css3多列

• 通过css3，我们可以创建多个列来对文本进行布局——就像报纸那样。

column-count

例子：把div元素中的文本分隔为三列👇

div{
	column-count:3;

	-moz-column-count:3; 	/* Firefox */
	-webkit-column-count:3; /* Safari 和 Chrome */
}

column-gap

例子：规定列之间40像素的间隔👇

div{
	column-gap:40px;
	
	-moz-column-gap:40px;		/* Firefox */
	-webkit-column-gap:40px;	/* Safari 和 Chrome */
}

column-rule

例子：规定列之间的宽度，样式和颜色👇

div{
	column-rule:3px outset #ff0000;

	-moz-column-rule:3px outset #ff0000;	/* Firefox */
	-webkit-column-rule:3px outset #ff0000;	/* Safari and Chrome */
}

属性	描述
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的简写属性。

column-rule-style

值	描述
none	定义没有规则。
hidden	定义隐藏规则。
dotted	定义点状规则。
dashed	定义虚线规则。
solid	定义实线规则。
double	定义双线规则。
groove	定义 3D grooved 规则。该效果取决于宽度和颜色值。
ridge	定义 3D ridged 规则。该效果取决于宽度和颜色值。
inset	定义 3D inset 规则。该效果取决于宽度和颜色值。
outset	定义 3D outset 规则。该效果取决于宽度和颜色值。