/*border-radius*/ .demo2{ border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:300px; border-radius:25px; } /*box-shadow*/ .demo3{ width:300px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px #888888; } /*border-image*/ .demo4{ -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */ -o-border-image:url(border.png) 30 30 round; /* Opera */ border-image:url(border.png) 30 30 round; } .demo5{ -webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */ -o-border-image:url(border.png) 30 30 stretch; /* Opera */ border-image:url(border.png) 30 30 stretch; } /*background-size*/ .demo6{ background:url(img_flwr.gif); background-size:100% 100%; background-repeat:no-repeat; } /*background-Origin/background-clip border-box padding-box content-box*/ .demo7{ background:url(img_flwr.gif); background-repeat:no-repeat; background-size:100% 100%; background-origin:content-box; } /*多个背景*/ .demo8{ background-image:url(img_flwr.gif),url(img_tree.gif); } /*gradient*/ /*线性渐变 水平*/ .demo9{ height: 200px; background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /* 标准的语法(必须放在最后) */ } /*线性渐变 左到右*/ .demo10{ height: 200px; background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, red , blue); /* 标准的语法(必须放在最后) */ } /*线性渐变 左上到右下*/ .demo11{ height: 200px; background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to bottom right, red , blue); /* 标准的语法(必须放在最后) */ } /*线性渐变 角度控制*/ .demo12{ height: 100px; background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(180deg, red, blue); /* 标准的语法(必须放在最后) */ } /*线性渐变 多色均匀*/ .demo13{ height: 200px; background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */ background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 标准的语法(必须放在最后) */ } /*线性渐变 多色不均匀*/ .demo14{ height: 200px; background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* Firefox 3.6 - 15 */ background: linear-gradient(red 10%, green 85%, blue 90%); /* 标准的语法(必须放在最后) */ } /*线性渐变 透明度的使用*/ .demo15{ height: 200px; background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法(必须放在最后) */ } /*线性渐变 重复性渐变*/ .demo16{ height: 200px; background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */ background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1 - 12.0 */ background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6 - 15 */ background: repeating-linear-gradient(red, yellow 10%, green 20%); /* 标准的语法(必须放在最后) */ } /*圆径渐变 均匀*/ .demo17{ height: 150px; width: 200px; background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */ background: radial-gradient(red, green, blue); /* 标准的语法(必须放在最后) */ } /*圆径渐变 不均匀*/ .demo18{ height: 150px; width: 200px; background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */ background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法(必须放在最后) */ } /*圆径渐变 重复 不均匀*/ .demo19 { height: 150px; width: 200px; background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1 - 6.0 */ background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6 - 12.0 */ background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6 - 15 */ background: repeating-radial-gradient(red, yellow 10%, green 15%); /* 标准的语法(必须放在最后) */ } /*文本阴影*/ .demo20{ text-shadow: 5px 5px 5px #FF0000; } /*防止最后一个单词过长溢出div*/ p.demo21{ width:11em; border:1px solid #000000; word-wrap:break-word; } /*字体*/ @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } .demo22{ font-family:myFirstFont; } /*2D转换 旋转*/ .demo23{ transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -webkit-transform:rotate(30deg); /* Safari and Chrome */ } /*2D转换 移动*/ .demo24{ transform:translate(50px,100px); -ms-transform:translate(50px,100px); /* IE 9 */ -webkit-transform:translate(50px,100px); /* Safari and Chrome */ } /*2D转换 放大*/ .demo25{ margin:100px; transform:scale(2,4); -ms-transform:scale(2,4); /* IE 9 */ -webkit-transform:scale(2,4); /* Safari and Chrome */ } /*2D转换 x轴 y轴 变形*/ .demo26{ transform:skew(30deg,20deg); -ms-transform:skew(30deg,20deg); /* IE 9 */ -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */ } /*2D转换 变换的一个合成属性 旋转,缩放,移动(平移)和倾斜*/ .demo27{ 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); /* IE 9 */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ } /*3D转换 旋转X*/ .demo28{ transform:rotateX(120deg); -webkit-transform:rotateX(120deg); /* Safari and Chrome */ } /*3D转换 旋转Y*/ .demo29{ transform: rotateY(130deg); -webkit-transform: rotateY(130deg); /* Safari and Chrome */ } /*过渡*/ .demo30 { width:100px; height:100px; background:red; transition:width 2s; -webkit-transition:width 2s; /* Safari */ } .demo30:hover { width:300px; } .demo31{ width: 100px; height: 100px; background: red; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s, height 2s, transform 2s; } .demo31:hover { width: 200px; height: 200px; -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ transform: rotate(180deg); } /*动画*/ .demo32{ width:100px; height:100px; background:red; animation:bgchange 5s linear 0s infinite alternate; -webkit-animation:bgchange 5s linear 0s infinite alternate; /* Safari and Chrome */ } @keyframes bgchange { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } @-webkit-keyframes bgchange /* Safari and Chrome */ { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } /*多列 如下div内的文件将变成3列显示*/ .demo33{ -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; /*指定列之间的间距*/ -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; /*制定列之间的间隔线*/ -moz-column-rule:4px outset #ff00ff; /* Firefox */ -webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */ column-rule:4px outset #ff00ff; } /*指定div可以被用户调整大小*/ .demo34{ resize:both; overflow:auto; }
时间: 2024-10-31 20:31:59