css3

一、css背景

 

CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制。

background-size 属性规定背景图片的尺寸。

调整背景图片的大小：

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 属性规定背景图片的定位区域。

div
{
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

二、css3文本效果

在 CSS3 中，text-shadow 可向文本应用阴影。

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

三、转换

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

transform：translatr（移动）rotate（旋转）scale（缩放）skew（围绕 X 轴把元素翻转 多少 度，围绕 Y 轴翻转 多少 度。）

四、CSS3 过渡（要配合hover一起使用）

div
{
transition: width 2s;}

div:hover
{
width:300px;
}

五、css3动画

 当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

 通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

• 规定动画的名称
• 规定动画的时长 

div
{
animation: myfirst 5s;}

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