通过控制左侧对应的开关,动态改变此处的样式预览
/* -------------------------------------------------------------
CSS3的跨浏览器的规则生成器
===================================================
在以下CSS文件中,您可编辑带有下划线的值,当您编辑任意值时,与其匹配都值可以自动生成,
当右侧示例达到您想要的效果时,您可以把代码复制到您的样式表。
------------------------------------------------------------- */
/* {CSS3圆角 off} */
.box_round {
-moz-border-radius: 12px; /* FF1+ */
-webkit-border-radius: 12px; /* Saf3+, Chrome */
border-radius: 12px; /* Opera 10.5, IE 9 */
}
/* */
/* {CSS3阴影 off} */
.box_shadow {
-moz-box-shadow: 0px 0px 40px #ffffff; /* FF3.5+ */
-webkit-box-shadow: 0px 0px 40px #ffffff; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 40px #ffffff; /* Opera 10.5, IE 9.0 */
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#ffffff'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#ffffff')"; /* IE8 */
}
/* */
/* {CSS3渐变背景 off} */
.box_gradient {
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999')"; /* IE8 */
}
/* */
/* {CSS3RGBA背景 off} */
.box_rgba {
background-color: #B4B490;
background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490')"; /* IE8 */
}
/* */
@font-face {
font-family: 'WebFont';
src: url('myfont.eot'); /* IE6+ */
src: local('☺'),
url('myfont.woff') format('woff'), /* FF3.6 */
url('myfont.ttf') format('truetype'); /* Saf3+,Chrome,Opera10+ */
}
/* 以下是作者版权信息,此文由 Pivot Code 翻译整理
btw- up/down keys work, along with your mouse wheel. ;)
coming soon.. extra css transforms (skew, scale), css transitions, and more.
plz leave feedback here.
© 2010; a Paul Irish and Jonathan Neal joint, in association w/ Boaz Sender
if you like this, you'll probably also dig yayQuery. <3
*/
.box_rotate { -moz-transform: rotate(7.5deg); /* FF3.5+ */ -o-transform: rotate(7.5deg); /* Opera 10.5 */ -webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */ }/* */