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