<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="assets/css3.css" />
<title>css常用实例</title>
</head>
<body>
<section>
<div class="part"><p class="border-radius-and-shadow">圆角和阴影边框</p></div>
<div class="part"><div class="border-image" id="round">在这里，图片铺满整个边框。</div></div>
<div class="part"><div class="border-image" id="stretch">在这里，图片被拉伸以填充该区域。</div></div>
</section>
<section>
<div class="part"><p class="bjt background-size-px">缩小的背景图片。</p></div>
<div class="part"><p class="bjt background-size-fen">拉伸的背景图片。</p></div>
<div class="part"><p class="bjt background-image-s">多幅背景图</p></div>
</section>
<section>
<div class="part"><p class="background-origin border-box">背景图定位border-box</p></div>
<div class="part"><p class="background-origin padding-box">背景图定位padding-box</p></div>
<div class="part"><p class="background-origin content-box">背景图定位content-box</p></div>
</section>
<section>
<div class="part"><p class="text-shadow">文字阴影</p></div>
<div class="part"><p class="word-wrap">文字自动换行This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. </p></div>
<div class="part"><p class="font-family">新字体With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.</p></div>
</section>
<section>
<div class="part"><p class="transform translate">平移-像素px</p></div>
<div class="part"><p class="transform rotate">旋转-角度deg</p></div>
<div class="part"><p class="transform scale">放大缩小-倍数</p></div>
</section>
<section>
<div class="part"><p class="transform skew">翻转 X轴 Y轴</p></div>
</section>
<section>
<div class="part"><p class="transform rotateX">3D旋转 围绕X轴</p></div>
<div class="part"><p class="transform rotateY">3D旋转 围绕Y轴</p></div>
</section>
<section>
<div class="part"><p class="transition-width">单个过渡动画</p></div>
<div class="part"><p class="transition-s">多个过渡动画</p></div>
<div class="part"><p class="transition-jianxie">延时0.5秒简写过渡动画属性</p></div>
</section>
<section>
<div class="part"><p class="animation"></p></div>
<div class="part"><p class="animation-s"></p></div>
<div class="part"><p class="animation-weizhi"></p></div>
</section>
<section>
<div class="part"><p class="animation-jianxie"></p></div>
<div class="part"><p class="animation-zichuang"></p></div>
<div class="part"><p style="width:100px; height:100px;"></p></div>
</section>
<section>
<div class="newspaper">
国家发展改革委近日发出通知国家发展改革委近日发出通知国家发展改革委近日发出通知国家发展改革委近日发出通知国家发展改革委近日发出通知国家发展改革委近日发出通知国家发展改革委近日发出通知国家发展改革委近日发出通知国家发展改革委近日发出通知国家发展改革委近日发出通知国家发展改革委近日发出通知
</div>
</section>
</body>
</html>
@charset "utf-8";
/* CSS Document */
section {
width:100%;
height:auto;
clear:both;
}
.part {
float:left;
width:33%;
height:auto;
}
.border-radius-and-shadow {
text-align:center;
border:2px solid #000;
padding:20px;
background:#dddddd;
width:350px;
border-radius:25px;/* 圆角边框 */
-moz-border-radius:25px; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;/* 边框阴影 */
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
}
/*图片边框*/
div.border-image {
border:40px solid transparent;
width:300px;
padding:40px 20px;
}
/*边框图片铺满*/
#round {
-moz-border-image:url(biankuang.jpg) 225 225 round; /* Old Firefox */
-webkit-border-image:url(biankuang.jpg) 225 225 round; /* Safari and Chrome */
-o-border-image:url(biankuang.jpg) 225 225 round; /* Opera */
border-image:url(biankuang.jpg) 225 225 round;
}
/*解释 那两个数字是你图片里小元素的宽高*/
/*边框图片拉伸*/
#stretch {
-moz-border-image:url(biankuang.jpg) 225 225 stretch; /* Old Firefox */
-webkit-border-image:url(biankuang.jpg) 225 225 stretch; /* Safari and Chrome */
-o-border-image:url(biankuang.jpg) 225 225 stretch; /* Opera */
border-image:url(biankuang.jpg) 225 225 stretch;
}
/*缩小背景图*/
.bjt {
width:150px;
height:150px;
border:#000 solid 1px;
}
.background-size-px {
background:url(biankuang.jpg);
background-size:100px 100px;
-moz-background-size:100px 100px; /* 老版本的 Firefox */
background-repeat:no-repeat;
}
/*拉伸的背景图*/
.background-size-fen {
background:url(biankuang.jpg);
background-size:40% 100%;
-moz-background-size:40% 100%; /* 老版本的 Firefox */
background-repeat:no-repeat;
}
/*多幅背景图*/
.background-image-s {
background-image:url("weiqu.jpg"), url("huaji.jpg"), url("fennu.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 0 0, 70px 0, 30px 70px;
}
/*背景图定位位置*/
.background-origin {
border:20px solid #99cc66;
padding:20px;
background-image:url(huaji.jpg);
background-repeat:no-repeat;
background-position:left;
}
.border-box {
background-origin:border-box;
}
.padding-box {
background-origin:padding-box;
}
.content-box {
background-origin:content-box;
}
/*文字阴影*/
.text-shadow {
text-shadow: 5px 5px 5px #FF0000;
}
.word-wrap {
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
/*新字体*/
@font-face {
font-family: myFirstFont;
src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */
}
.font-family {
font-family:myFirstFont;
}
/*2D转换*/
.transform {
width:100px;
height:75px;
background-color:#ffcccc;
border:1px solid black;
}
.translate {/*平移 宽高*/
transform:translate(50px, 30px);
-ms-transform:translate(50px, 30px); /* IE 9 */
-moz-transform:translate(50px, 30px); /* Firefox */
-webkit-transform:translate(50px, 30px); /* Safari and Chrome */
-o-transform:translate(50px, 30px); /* Opera */
}
.rotate {/*旋转 正数是顺时针 负数是逆时针*/
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
.scale {/*放大缩小 宽 高*/
transform:scale(2, 1);
-ms-transform:scale(2, 1); /* IE 9 */
-moz-transform:scale(2, 1); /* Firefox */
-webkit-transform:scale(2, 1); /* Safari and Chrome */
-o-transform:scale(2, 1); /* Opera */
}
.skew {/*翻转 X轴 Y轴*/
transform:skew(10deg, 30deg);
-ms-transform:skew(10deg, 30deg); /* IE 9 */
-moz-transform:skew(10deg, 30deg); /* Firefox */
-webkit-transform:skew(10deg, 30deg); /* Safari and Chrome */
-o-transform:skew(10deg, 30deg); /* Opera */
}
.rotateX {/*3D旋转围绕X轴*/
transform:rotateX(130deg);
-webkit-transform:rotateX(130deg); /* Safari and Chrome */
-moz-transform:rotateX(130deg); /* Firefox */
}
.rotateY {/*3D旋转围绕Y轴*/
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg); /* Firefox */
}
.transition-width {/*过渡动画*/
width:100px;
height:100px;
background:#0099cc;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
.transition-width:hover {
width:300px;
}
.transition-s {/*多个过渡动画*/
width:100px;
height:20px;
background:#0099cc;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
.transition-s:hover {
width:100px;
height:80px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
.transition-jianxie {/*过渡简写属性*/
width:100px;
height:100px;
background:#0099cc;
transition:width 1s linear 0.5s;/*名称，花费时间。。 过渡时快时慢linear是匀速 ease是开始慢。。 延时时间*/
-moz-transition:width 1s linear 0.5s;/* Firefox 4 */
-webkit-transition:width 1s linear 0.5s;/* Safari and Chrome */
-o-transition:width 1s linear 0.5s;/* Opera */
}
.transition-jianxie:hover {
width:200px;
}
/*动画*/
.animation {
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst {/* keyframes是创建动画的意思*/
from {
background:red;
}
to {
background:yellow;
}
}
@-moz-keyframes myfirst {
from {
background:red;
}
to {
background:yellow;
}
} /* Firefox */
@-webkit-keyframes myfirst {
from {
background:red;
}
to {
background:yellow;
}
} /* Safari and Chrome */
@-o-keyframes myfirst {
from {
background:red;
}
to {
background:yellow;
}
} /* Opera */
/*动画 变好几次*/
.animation-s {
width:100px;
height:100px;
background:red;
animation:mysecond 5s;
-moz-animation:mysecond 5s; /* Firefox */
-webkit-animation:mysecond 5s; /* Safari and Chrome */
-o-animation:mysecond 5s; /* Opera */
}
@keyframes mysecond {
0% {
background:red;
}
25% {
background:yellow;
}
50% {
background:blue;
}
100% {
background:green;
}
}
@-moz-keyframes mysecond /* Firefox */ {
0% {
background:red;
}
25% {
background:yellow;
}
50% {
background:blue;
}
100% {
background:green;
}
}
@-webkit-keyframes mysecond /* Safari and Chrome */ {
0% {
background:red;
}
25% {
background:yellow;
}
50% {
background:blue;
}
100% {
background:green;
}
}
@-o-keyframes mysecond /* Opera */ {
0% {
background:red;
}
25% {
background:yellow;
}
50% {
background:blue;
}
100% {
background:green;
}
}
.animation-weizhi {
width:30px;
height:30px;
background:red;
position:relative;
animation:mythird 5s;
-moz-animation:mythird 5s; /* Firefox */
-webkit-animation:mythird 5s; /* Safari and Chrome */
-o-animation:mythird 5s; /* Opera */
}
@keyframes mythird {
0% {
background:red;
left:0px;
top:0px;
}
25% {
background:yellow;
left:70px;
top:0px;
}
50% {
background:blue;
left:70px;
top:70px;
}
75% {
background:green;
left:0px;
top:70px;
}
100% {
background:red;
left:0px;
top:0px;
}
}
@-moz-keyframes mythird /* Firefox */ {
0% {
background:red;
left:0px;
top:0px;
}
25% {
background:yellow;
left:70px;
top:0px;
}
50% {
background:blue;
left:70px;
top:70px;
}
75% {
background:green;
left:0px;
top:70px;
}
100% {
background:red;
left:0px;
top:0px;
}
}
@-webkit-keyframes mythird /* Safari and Chrome */ {
0% {
background:red;
left:0px;
top:0px;
}
25% {
background:yellow;
left:70px;
top:0px;
}
50% {
background:blue;
left:100px;
top:70px;
}
75% {
background:green;
left:0px;
top:70px;
}
100% {
background:red;
left:0px;
top:0px;
}
}
@-o-keyframes mythird /* Opera */ {
0% {
background:red;
left:0px;
top:0px;
}
25% {
background:yellow;
left:70px;
top:0px;
}
50% {
background:blue;
left:70px;
top:70px;
}
75% {
background:green;
left:0px;
top:70px;
}
100% {
background:red;
left:0px;
top:0px;
}
}
.animation-jianxie {
width:30px;
height:30px;
background:red;
position:relative;
/*linear 匀速ease慢快慢ease-in低速开始ease-out低速结束*/
/*所有简写 包括名称。。持续时间。。过渡时快时慢。。延时时间。。
播放次数infinite是无限次也可以写数字。。。正常播放normal一次正向一次反向播放alternate*/
animation:fourth 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation:fourth 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:fourth 5s linear 2s infinite alternate;
/* Opera: */
-o-animation:fourth 5s linear 2s infinite alternate;
}
@keyframes fourth {
0% {
background:red;
left:0px;
top:0px;
}
25% {
background:yellow;
left:70px;
top:0px;
}
50% {
background:blue;
left:70px;
top:70px;
}
75% {
background:green;
left:0px;
top:70px;
}
100% {
background:red;
left:0px;
top:0px;
}
}
@-moz-keyframes fourth /* Firefox */ {
0% {
background:red;
left:0px;
top:0px;
}
25% {
background:yellow;
left:70px;
top:0px;
}
50% {
background:blue;
left:70px;
top:70px;
}
75% {
background:green;
left:0px;
top:70px;
}
100% {
background:red;
left:0px;
top:0px;
}
}
@-webkit-keyframes fourth /* Safari and Chrome */ {
0% {
background:red;
left:0px;
top:0px;
}
25% {
background:yellow;
left:70px;
top:0px;
}
50% {
background:blue;
left:70px;
top:70px;
}
75% {
background:green;
left:0px;
top:70px;
}
100% {
background:red;
left:0px;
top:0px;
}
}
@-o-keyframes fourth /* Opera */ {
0% {
background:red;
left:0px;
top:0px;
}
25% {
background:yellow;
left:70px;
top:0px;
}
50% {
background:blue;
left:70px;
top:70px;
}
75% {
background:green;
left:0px;
top:70px;
}
100% {
background:red;
left:0px;
top:0px;
}
}
.animation-zichuang {
width:50px;
height:50px;
background:url(fennu.jpg);
background-size:50px 50px;
-moz-background-size:50px 50px; /* 老版本的 Firefox */
background-repeat:no-repeat;
position:relative;
/*所有简写 包括名称。。持续时间。。过渡时快时慢。。延时时间。。
播放次数infinite是无限次也可以写数字。。。正常播放normal一次正向一次反向播放alternate*/
/*linear 匀速ease慢快慢ease-in低速开始ease-out低速结束*/
animation:fifth 1s linear 0.1s infinite alternate;
/* Firefox: */
-moz-animation:fifth 1s linear 0.1s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:fifth 1s linear 0.1s infinite alternate;
/* Opera: */
-o-animation:fifth 1s linear 0.1s infinite alternate;
}
@keyframes fifth {
from {
left:0px;
top:0px;
}
to {
left:0px;
top:30px;
}
}
@-moz-keyframes fifth /* Firefox */ {
from {
left:0px;
top:0px;
}
to {
left:0px;
top:30px;
}
}
@-webkit-keyframes fifth /* Safari and Chrome */ {
from {
left:0px;
top:0px;
}
to {
left:0px;
top:30px;
}
}
@-o-keyframes fifth /* Opera */ {
from {
left:0px;
top:0px;
}
to {
left:0px;
top:30px;
}
}
/*多列*/
.newspaper
{column-count:3;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
}
