<script src="/js/jquery-1.7.1.min.js" language="javascript"></script> <script language="javascript"> $(document).ready(function(){ $('textarea').each(function(){ $(this).height($(this)[0].scrollHeight); }); }) </script> <style> * { padding:0; margin:0; } h1 { font-size:20px; margin-top:15px; border-bottom:1px dotted #ccc; display:table; } textarea { border:1px solid #ccc; width:100%; } dt { font-weight:bold; } #content { width:80%; margin:0 auto; } #nav { position:fixed; right:5px; top:5px; background:#000; opacity:0.5; filter:alpha(opacity=50); padding:15px; color:#fff; } #nav li { list-style-type:none; } #nav li a { color:#fff; text-decoration:none; } #nav li a:hover { text-decoration:underline; } .box { width:80px; height:80px; display:block; background-color: #D0D0D0; margin:10px 5px; } #rgba { position:relative; height:150px; } #rgba .box { position:absolute; left:0; top:0; } /******************************************************************************************/ .box_round { -moz-border-radius: 10px; /* FF1+ */ -webkit-border-radius: 10px; /* Saf3+, Chrome */ border-radius: 10px; /* Opera 10.5, IE 9 */ } .box_shadow { border:1px solid #999; -moz-box-shadow: 10px 10px 4px #666; /* FF3.5+ */ -webkit-box-shadow: 10px 10px 4px #666; /* Saf3.0+, Chrome */ box-shadow: 10px 10px 4px #666; /* Opera 10.5, IE 9.0 */ filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=10px, OffY=10px, Color='#666'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=10px, OffY=10px, Color='#666')"; /* IE8 */ } .box_gradient { background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */ background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999', GradientType='0'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999',GradientType='0')"; /* IE8 */ } #rgba .box_rgba { left:50px; top:50px; background-color:#03F; opacity:0.5; filter:alpha(opacity=50); } .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.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand'); -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand')"; /* IE8 */ } </style> </head> <body> <div id="content"> <div id="nav"> <ul> <li><a href="#rounded">圆角的css</a></li> <li><a href="#shadow">盒装阴影的css </a></li> <li><a href="#gradient">线性渐变的css</a></li> <li><a href="#opacity">透明的css</a></li> <li><a href="#rotation">旋转的css</a></li> <li><a href="#font-face">服务器端字体的css</a></li> </ul> </div> <h1 id="rounded">圆角的css (<strong>Rounded Corner</strong>)</h1> <div> <div class="box box_round"></div> </div> <textarea> /* CSS3 */ .box_round { -moz-border-radius: 30px; /* FF1+ */ -webkit-border-radius: 30px; /* Saf3+, Chrome */ border-radius: 30px; /* Opera 10.5, IE 9 */ } </textarea> <h1 id="shadow">盒装阴影的css (<strong>Box Shadow</strong>)</h1> <div> <div class="box box_shadow"></div> <div class=""> <p>-moz-box-shadow、-webkit-box-shadow和box-shadow的设置是一样的,都有4个参数,含义分别为:x轴偏移值、y轴偏移值、阴影的模糊度、以及阴影颜色。</p> <p>IE 6~8使用其独有的滤镜,需要设置三个参数:offX(X轴偏移值)、offY(Y轴偏移值)、Color(阴影颜色)。</p> </div> </div> <textarea> /* CSS3 */ .box_shadow { -moz-box-shadow: 3px 3px 4px #333333; /* FF3.5+ */ -webkit-box-shadow: 3px 3px 4px #33333; /* Saf3.0+, Chrome */ box-shadow: 3px 3px 4px #33333; /* Opera 10.5, IE 9.0 */ filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#333333'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#333333')"; /* IE8 */ } </textarea> <h1 id="gradient">线性渐变的css (<strong>Gradient</strong>)</h1> <div> <div class="box box_gradient"></div> <div> <dl> <dt>-moz-linear-gradient</dt> <dd>-moz-linear-gradient有三个参数。第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。</dd> </dl> <dl> <dt>-webkit-gradient</dt> <dd>-webkit-gradient是webkit引擎对渐变的实现,一共有五个参数。第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(辐射渐变)。第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如left top(左上角)和left bottom(左下角)。第四个和第五个参数,分别是两个color-stop函数。color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。</dd> </dl> <dl> <dt>DXImageTransform.Microsoft.gradient</dt> <dd>IE依靠滤镜实现渐变。startColorstr表示起点的颜色,endColorstr表示终点颜色。GradientType表示渐变类型,0为缺省值,表示垂直渐变,1表示水平渐变。</dd> </dl> </div> </div> <textarea> /* CSS3 */ .box_rgba { background-color: #B4B490; background:transparent; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490')"; /* IE8 */ zoom: 1; background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome */ } </textarea> <h1 id="opacity">透明的css (<strong>Opacity</strong>)</h1> <div id="rgba"> <div class="box"></div> <div class="box box_rgba"></div> </div> <textarea> /* CSS3 */ .box_gradient { opacity:0.5; filter:alpha(opacity=50); } </textarea> <h1 id="rotation">旋转的css (<strong>rotation</strong>)</h1> <div> <div class="box box_rotate"></div> <div> <p>除了IE以外,其他浏览器都是用rotate函数,实现某个对象的旋转。比如rotate(7.5deg)就表示顺时针旋转7.5度(degree)。</p> <p>IE则需要用到一个复杂的滤镜DXImageTransform.Microsoft.Matrix。它一共接受五个参数,前四个参数需要自行计算三角函数,然后分别写成M11 = cos(rotation),M12 = -sin(rotation),M21 = sin(rotation),M22 = cos(rotation),其中的rotation表示旋转角度,如果顺时针旋转7.5度,则rotation就为7.5;第五个参数SizingMethod表示重绘方式,'auto expand'代表自动扩展到新的边界。</p> <p>除了这个滤镜,IE还有一个稍微简单一点的滤镜DXImageTransform.Microsoft.BasicImage(rotation=x)。其中的x只能取值为1,2,3,0,分别表示顺时针选择90度、180度、270度和360度。</p> </div> </div> <textarea> /* CSS3 */ .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.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand'); -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand')"; /* IE8 */ } </textarea> <h1 id="font-face">服务器端字体的css (<strong>font-face</strong>)</h1> <textarea> /* CSS3 */ @font-face { font-family: 'MyFont'; src: url('myfont.eot'); /* IE6+ */ src: local('myfont.ttf'), url('myfont.woff') format('woff'), /* FF3.6 */ url('myfont.ttf') format('truetype'); /* FF3.5+, Saf3+,Chrome,Opera10+ */ } .box_font{ font-family: "MyFont"; } </textarea> <div> <div> <p>第一行代码:</p> <p>font-family: 'MyFont';</p> <p>表示为这种字体起一个名称,可以随意设置,我这里用的是MyFont。</p> <p>src: url('myfont.eot');</p> <p>这一行表示字体位置,由于ie只支持服务器端的eot字体,所以这一行是ie专用的。</p> <p>src: local('myfont.ttf'),<br /> url('myfont.woff') format('woff'), <br /> url('myfont.ttf') format('truetype');</p> <p>local()表示在本机(客户端)查找该字体,如果本机已经安装了,就不用下载了。url()表示字体在服务器上的位置,format()用来说明字体格式。Firefox 3.5支持TrueType和OpenType字体,Firefox 3.6又增加了WOFF字体。其他基于Webkit引擎的浏览器(sarif,opera、chrome),目前好像只支持truetype。</p> <p>然后,使用的时候这样写就可以了。</p> <p>h2{ font-family: "MyFont"; }</p> <p>需要注意的是,字体文件必须与网页文件来自同一个域名,符合浏览器的"同源政策"。另外,由于中文字体文件太大,服务器端字体显然只适用于英文字体。</p> </div> </div> </div> |